Fire works animations12/29/2023 When the browser window is resized, several things need to happen to make sure that fireworks or stars still have the desired behavior. A timer for 800 milliseconds is set and when that time is up, the entire firework starts to fade out. After the firework is sent up into the "air", a function called explodeTimer() is called which creates a timer that waits for the firework to nearly finish the animation that throws it into the air and then expands the firework rays and adds the blurred background to make it appear as though it is exploding. If all the fireworks have been animated, they are all reset to their original state with new position and color assignments. This nested function creates a slightly varying timer for each firework and when the timer expires, the given firework is animated between 7/10ths and 9/10ths of the viewport height. This function loops through each firework and calls the nested function createTimer(). Firework timing functions and animation:Īfter all the fireworks are created, the function fireworkTiming() is called. If the browser supports filter:blur() a blurred background is created for the firework. These positions and rotation are assigned to each ray of the firework. At the top of the document, the variables are set that give the rotation and x-y position of each firework ray, relative to the firework. Each firework is also given 12 rays (they show up when the firework explodes). The fireworks are created after the stars have finished coming to be :)Įach firework is 100px below the viewport (so you can't see it) and is assigned a random x coordinate and a random color. The star then is positioned randomly inside the viewport. The short definition is that the viewport is the area of the visible height of the page (multiplied by) the visible width of the page. Here is the long definition of "viewport" wikipedia viewport article. Viewport width is the width of the visible part of the page and viewport height is the height of the visible part of the page. Viewport is the visible part of the page. It will create a star for each pixel that the viewport is wide. It starts by setting up the stars in the background by creating a star with random x y coordinates along the viewport width and height. When the page loads, function initialize() is called which sets up everything. If you are not fluent in JavaScript, you can understand how this works by reading below. I think I'll be learning canvas soon because browsers are obviously not built to be able to process animations like this in the DOM (document object model ) alone. The answer I received suggested to use canvas or use requestAnimationFrame() (native Javascript function) to prevent the use of all the timers this script currently uses. Out of concern of the high CPU usage in response to the computer processing this web page, I asked a question on code review stackexchange which you can read here. Here is a link for a jsfiddle with code comments added to almost every single line of JavaScript to allow Javascript oriented people to read along. I would also appreciate your support in the instructables technology contest. To view the animation, please follow this link with a browser other than Internet Explorer. This project is an animation of fireworks that took over 8 hours of work to create. These pages contain information and services that may be helpful with your website design.Please click the link to watch the firework animation ( Firework Animation). These menus include other sections such as message board, counters, animation and graphics software. Each category page has a secondary gifs menu. Free Website HostingĪlthough our focus has always been website development and design, lately we have been adding larger images for laptop and smart phone backgrounds plus print images for borders and holidays.īelow you will find our free gif categories. Along with our 1000's of animated gifs we maintain helpful information sections such as free website and image hosting and free guestbooks. We add over 40 new graphics every week which are listed on our updates page. Locate or browse free animated gifs, backgrounds and more using the categories below or visit our Main Menu.įree Gifs and Animations is over 240 categories of animated gifs and images that may be used on personal and non profit educational websites and projects royalty free.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |