Right away, the problems with the CSS approach to animation become apparent: For one, the CSS animation applies to all div containers the same way at the same time. Granted, we could just apply different IDs to each div and animate them individually, but that seems like a lot of extraneous CSS and HTML code to brute-force the effect that we’re looking for. Secondly, the JavaScript would also start to get rather unwieldy rather quickly for similar reasons. The real answer here is to animate the objects using JavaScript instead. This will allows us to define random variables for speed and timing on the fly instead of using global parameters that would have to be overridden every time.
iteration3.js
function makebox() {
var top=Math.random();
var speed=Math.random();
speed=speed*8000;
top=top*600;
document.getElementById("box1").style.top=top+"px";
document.getElementById("box1").style.left="-50%";
document.getElementById("box1").style.backgroundColor=getRandomColor();
document.getElementById("box1").style.display="block";
$("#box1").animate({left: "110%"}, speed);
}
We’re going to use the same HTML framework as before, only removing any CSS that defines animation and adding a script tag that calls the jQuery library. (jQuery makes animation a lot easier, reducing several lines of JavaScript to a single line.) Taking a look at the new JavaScript makebox() function, we’ll see a new variable, speed, that is defined as some random multiple of 8000. This value will be used to define how long the animation takes, effectively defining the speed of the div’s motion across the screen.
document.getElementById("box1").style.top=top+"px";
document.getElementById("box1").style.left="-50%";
document.getElementById("box1").style.backgroundColor=getRandomColor();
document.getElementById("box1").style.display="block";This CSS block is effectively the same as we’ve seen previously, except that we’re now going to place the div with ID “box1” at a position off the left side of the screen. This -50% location is arbitrary for now, defining a spot where the div will (hopefully) be hidden to start (about 50% of the screen’s width beyond the left edge of the screen).
$("#box1").animate({left: "110%"}, speed);
This jQuery argument polls the HTML code for a div with the ID “box1”, then animates it from its starting position (defined in the preceding CSS block) to a position 110% the width of the screen from the left edge (or about 10% the width of the screen right of the right edge). Note that jQuery animations have to be defined relative to the initial state, otherwise unexpected things may happen depending on the way the browser chooses to render the result (in other words, you can’t/shouldn’t animate from a “left” position to a “right” position). The speed variable defines the duration of the animation, in miliseconds. For this example, the animation will take anywhere from 0-8 seconds.
Note that the animation in this iteration does not loop (we’ll address that in the next iteration), so you may need to refresh the page.