Randomized animation with JavaScript - CSS Tutorial

- [Chris] Hi, this Chris Converse and in this episode, I'll show you how to create a randomized animation using layered images and a small amount of JavaScript. Now, we use this technique for a mobile web application for a past Adobe MAX conference and thought you might like to see how it was done, so if you'd like to follow along with me, download the exercise files and let's begin by opening index.html in a text editor. Now, in the HTML file you'll see that in the heading area I've added all the CSS rules in line here then if we scroll down, you'll see that inside of the body area we have a single div element with an ID of animation and we have two images inside, one called kaiju_01.jpg and another called kaiju_02.jpg and these are being positioned over top of each other using these CSS rules here. Now, the illustration that we'll be animating was created by Rayce Bird, and he gave us written permission to use it for this episode. And he created this for an event called the Kaiju Project, which was created by Russell Brown for Adobe MAX. And Russell also gave us permission to use this branded material, and so we'd like to thank both of them for their generosity. And now before we begin adding our Javascript, let's open the index.html file up in a browser, and take a look at the layout. So here we can see the layout that we're starting with. Now, to visually represent what's going on, we have our base illustration file, which is kaiju_01.jpg, and we have another version of the illustration, called kaiju_02.jpg, which is positioned right over the top of the original illustration. And we created this glowing version by simply painting a gold color inside of Photoshop over the top of the original illustration. So now back in the HTML file, let's scroll down, let's find our div with an ID of animation. Let's hit a few returns, and what we're going to do after this div element is add our Javascript, and since the Javascript is being added after the div element, the browser will have already loaded the div element, so we can begin to animate it. So start with a less-than sign, type in script, then a space, let's set a type attribute, we'll set that equal to text/javascript, let's end the beginning tag. Let's hit a few returns, and let's end our script tag. And now the first thing we want to do is set up something called a set interval. This way we can run a function or an instruction multiple times, and this is what's going to give us our animation. So we're going to type setInterval, and that has to have the capital "I" in the middle, all one word. Putin our parentheses, then a semicolon. Inside, we can declare a function that's going to run or we can create a generic function, which is what we're going to do here. So we're going to type function, beginning and ending parentheses, beginning and ending curly brackets. Then after our function we're going to hit a comma, and then we're going to pick an amount of time that the set interval will wait before it runs the function again. So for now let's set this to 1000 milliseconds, or one second. Now let's get our cursor inside of the curly brackets, and let's split this open. So now what's inside of this function here, is going to run once every second. And so the first thing we'll do is set a variable and we'll set that to a random number. So we'll type var number equals, and then we'll use a built-in random number generator that's part of Javascript. So we'll type a capital Math.random, put in our parentheses, and then a semicolon. And what this will do is create what's called a floating point number or a decimal place, and it will be from zero all the way to .99999, just before the whole number of one. And so now that we're generating a random number, one thing that I like to do is put a little debug statement in my webpage so I can actually see the numbers being created. So let's come up here after the div, let's hit a few returns, let's add a paragraph tag. Let's end the element, and then inside let's set an ID equal to debug. And so with that in place, let's come down here after our variable, let's hit a few returns, and using Javascript, let's put the random number into that paragraph element so we can see it on the stage. So we do that by typing document.getElementById, then inside of the parentheses, we'll put our string, type in debug. Then after the parentheses we'll type .innerHTML, space, equals, space, and let's add the number variable, then a semicolon. And now at this point we can hit save, we can go back to the browser and hit reload, and then once per second you'll see a new random number being generated. So this is the number that we're going to use to change the opacity of the glowing JPEG sitting on top of the original illustration. So now let's go back to our HTML file, and let's target the glowing animation that's sitting on top of the original illustration. So back inside of our script, let's hit a few returns, let's type document.getElementById again, and then we'll come up here and copy the ID named animation_glowing, which is assigned to the image that's bringing in the kaiju_02.jpg. So let's copy that, let's come down here, let's paste it. And then outside of the parentheses we're going to set the style of this element, so we'll type .style, then another dot, then opacity, and we're going to set this equal to the variable named number. So with that change in place, save your HTMl, let's go back to the browser, hit reload, and now in addition to the numbers counting up in the debug area, you'll also notice that the opacity of the glowing JPEG file is being changed as well. So now that the animation's working, let's speed this up, so it looks a little more realistic. So back in our Javascript file, the amount of time that it takes for our set interval to run this function, we set this to 1000 milliseconds, let's come in here and change this to 120 milliseconds, so this will run just under 10 times per second. Save your HTML, go back to the browser, hit reload, and now you'll see the animation runs a lot faster, and has a little more of a fire or flickering effect. And now one final adjustment I want to make is I don't want the opacity to ever be below 30%. Even though we have a flickering effect from the fire, we'll always have some glow happening. So I never want this to go below 30%. So back in our Javascript file, and let's add a conditional statement that will check to see if the random number is less than .3, or 30%. If it is, we're going to add another 40% to it. So we're going to come in here and type if, beginning and ending parentheses, beginning and ending bracket, split this open on the brackets. Inside of the parentheses, we're going to say if number, space, is less than .3, and then inside of the if statement, so if this condition is true, we're going to set number equal to itself plus .4. And we do that by typing a plus sign, an equals sign, and then .4 then a semicolon. So again, if the number's ever less than .3, we're going to add another .4 to this. So the lowest the opacity can ever be is .3. If it ever gets below .3, we'll add .4 to it, which will jump the opacity anywhere from .4 up to .699. And now, with that in place, we'll save our HTML, go back to the browser, we'll hit reload, and now if you watch the random numbers you'll notice they never get below .3. And now our final step will be to come back to the HTML and let's comment out our debugging code. So we'll add an HTML comment around the paragraph with an ID of debug. And in the Javascript we can put two forward slashes before the getElementById targeting that same debug element. Then save your HTML, back to the browser, and hit reload. And now with a little imagination, you can apply this effect to any number of photos or illustrations, including candles, lights, or even make stars twinkle in the nighttime sky. And the random aspect will keep peoples' attention longer than an animation with a visible repeating pattern. Now, if you'd like to browse the mobile website where this technique was used, you can visit kaiju.mymobileevents.com and be sure to visit the gallery of posters created by those who attended the event. And so with that, I'll conclude this episode, and as always, thanks for watching.