<http://schema.org/articleBody>
"Kelli Shaver is freelance developer and UI designer.  You can follow her on Twitter @KelliShaver and on GitHub here.\nIt's 4th of July, and for those of you in the U.S., you know what that means \u2014 it's time to grab a beer, throw a steak on the barbecue, and blow stuff up. Why not get into the spirit of things with a little explosive goodness right on your website or blog?\nIn this article, we'll create a simple fireworks effect using jQuery that can be applied to any element on your web page. Use it to add fireworks to photos, backgrounds, or anywhere else you feel like blowing up a few pixels. The result is fairly basic, but it's still pretty cool and it will provide you with a good primer on JavaScript animation.\n\nSetting Up the Page\nTo start with, we'll need a little bit of markup, mostly for demonstration purposes. \nThis is pretty straightforward. We're just setting up some basic HTML, and grabbing jQuery from Google's CDN. We're also calling fireworks.css and fireworks.js, which we'll create in a moment. jQuery is my JavaScript framework of choice, so it's what I'll be using to create the fireworks. This takes a lot of work out of animating our explosions.\nOnce the markup is out of the way, we can move on to our CSS. Again, it's fairly simple. We just need to define a couple of elements, namely the container that will hold the fireworks ('#photo' in this case), and a small div we can use as our base particle, which we'll be using instead of an image, so we can easily change the color.\nLet's start with the container. I grabbed a nice photo of a lake at night from Stock Exchange and plan to use that as my background.\nMost of the CSS above is simply for defining the height, width, and position of the photo on the page, but there are a few things to note. We've set the overflow to 'hidden' so that our fireworks don't shoot off the photo, and added position:relative, because we will be absolutely positioning our particle elements within the photo. As you can see, there's no image tag in the HTML for the photo. It's used as the div background, instead. That way we don't have to worry about it when manipulating the contents of our photo div.\nNext, we need to define the CSS for our base particle. All we need to do is specify a height, width, and tell the browser to use absolute positioning. I'm using a 3px by 3px particle, but if you're using a larger, or smaller photo, you may want to adjust the particle size.\nNow you should have something that looks like this. I added in some CSS for page body as well, but it has no bearing whatsoever on the fireworks.\n\n\n\t\n\nCreating the Animation\nWith these out of the way, we're ready to move on to the meat and potatoes of the project \u2014 the JavaScript.\nBefore we can begin writing our explosion function, though, we'll need a quick method for duplicating our particles. We could always use jQuery's built-in clone method, but since we'll be making a lot of copies, let's go with something a little more efficient. \nSince I'm a big fan of not re-inventing the wheel, I'll just use a handy little plug-in I found over at jQuery Minute that extends jQuery with a .duplicate() function.\nThe linked article above has a good explanation of how the plug-in works, so I'll not elaborate. For now, all we care about is that we can call it on our particle element by using .duplicate(50) for instance, which will give us 50 copies at our disposal.\nAlright, now let's really get down to business and write our explosion function. Before we begin building animations and creating elements, though, we need to define a few variables that get set whenever the function is called.\nLet's go through this step-by-step and take a look at what each of these variables are for.\n\nsky - This is a jQuery object for the element that will contain our fireworks, built by passing the element ID at runtime, like so: explosion('photo').\ncolors - A simple array of some bright colors to use for our fireworks. We'll be creating single-color fireworks, and multi-colored ones. \nemitter - We create a simple div object and give it the particle class. This will be the base or center of our explosion.\nmulticolor - A random number from 0-10 used later to determine whether or not to make the firework multi-colored.\n\nNow that we've created our emitter object, we need to add a couple of additional CSS properties to it. It's best to do this before appending it to the DOM, so let's do that.\nOnce the emitter is styled, we can append it to our container. While we're at it, let's go ahead and make those duplicates, as well.\nWhoa! Hang on. What's with all the math? Don't worry. We're just creating random numbers*. This means that when our firework goes off, it will be randomly placed on the photo.\nIn this case, the width is a random number between 3 and the width of our photo (400), and the height is a random number between 3 and 100, because we only want fireworks to appear in the top 100px of the photo (the sky). Why 3? No particular reason at all, other than that I wanted to ensure that the explosion is always centered a bit inside the photo's edge.\nFinally, we get the background color by pulling a random color from the array.\n* To create a random number within a range, take the difference of the maximum value minus one less than the minimum value, multiply that by the value from random(), which will be between 0 and 1. Then multiply it by the maximum value. Last, wrap all of that in the floor() function, to convert the result into an integer.\nGreat! Now we have 51 particles sitting on our canvas in the x,y coordinates we randomly determined above. All we need to do now is give them a little animation and possibly a new coat of paint.\nTo do this, it means we have to loop through them. That being the case, I really wouldn't recommend making more than 50 or so particles, because it can get a little resource-intensive on older machines.\njQuery's .each() function allows us to step through the array of elements, executing the code inside on each of them.\nYou'll notice here we're setting an x offset and a y offset. These determine which direction the particle is going to move in, and by how much. Using the same formula as above, these offsets will be random numbers in the range of -10 to 10 (for up/down and left/right, respectively).\nRemember when we generated a random number above for our multicolored variable? Now let's use it and see if we need to create a multi-colored explosion by changing the color of the current particle. I want multi-colored fireworks a little less than half the time, so I chose to use 5 as my cut-off point. You could change it around however you like.\nThis should be fairly self-explanatory at this point. If the value of multicolor is greater than 5, change the particle's background by grabbing another random color from the colors array.\nNow let's put these particles in motion. We're going to set up an animation sequence, based on the x and y offsets we determined above. To get the total length of each particles animation, we'll multiply those offsets by 10. This gives us a nice spread between -100x, -100y and 100x, 100y, from the center point, meaning our explosion will have a maximum diameter of 200px. Depending on the size of your photo, you may want to make this larger, or smaller (Hint: If you're making it larger, use bigger particles for a better effect).\nAs you can see, we also set the animation speed to 2.5 seconds (2500 milliseconds), which gives us a smooth, uniform expansion of particles out from our center point.\nAll we have to do now is sort out what to do with the particles once they've reached the end of their animation sequence. Well, what do fireworks do after they're done fireworking? They drop a little and fade away, so we'll make our particles do just that.\nThe above animation, executed after the expansion animation has completed, drops the particle by 20px while simultaneously fading it to 10% opacity. We use the \"slow\" duration preset, so the particles appear to \"hang\" slightly in the atmosphere.\nThat's it! You can now call the explode() function to set off a firework on your photo, either triggering it manually, or calling it automatically when the page loads. In the example, I'm calling it every 3 seconds via setInterval.\nUnfortunately, we can't run the animation here, but you can check out a video demo below:\n\n\n\n\n\n\n\nI hope you enjoyed the tutorial. You can view a live example of the fireworks here, or go straight to the source.\nMore development and design resources from Mashable:\n- Top 10 Resources for Design Inspiration- HOW TO: Get Up-to-Date on WordPress 3.0- 7 Hackathons Around the World and the Web- 10 Web Design Bloggers You Should Follow- Top 10 Beautiful Minimalist Icon Sets"^^<http://www.w3.org/2001/XMLSchema#string>
<http://mashable.com/2010/07/04/javascript-fireworks-animation/>