Code section: Circle creation
Click here to view code image
/**
Circle creation
**/
var circleCount = 250,
circlesHtml = ””,
$circles = ””;
for (var i = 0; i < circleCount; i++) {
circlesHtml += “
}
$circle = $(circlesHtml);
The demo’s second section, Circle creation, generates the primary div elements to be
animated. Here, it first defines the desired number of circles as circleCount. Then, it
defines a circlesHtml string to contain the circles’ collated HTML.
Next, it iterates up to the circleCount number to generate the circles’ HTML.
Notice that it uses the performance best practice of batching DOM additions, as detailed in
Chapter 7, “Animation Performance.” It collates the markup for each div element onto a
master circlesHtml string that’s later inserted into the DOM in a single action. (If you
were to insert the div elements into the DOM one at a time, the negative performance
impact would be significant: UI interaction in the browser would be frozen until the
relatively slow element insertion process completed.)
Finally, it wraps the circle elements in a jQuery element object so they can be easily
manipulated as a group in the upcoming Circle animation section.
Code section: Container animation
Click here to view code image
/**
Container animation
**/
$container
.css(“perspective-origin”, screenWidth/2 + “px ” + screenHeight/2 + “px”)
.velocity(
{
perspective: [ 215, 50 ],
opacity: [ 0.90, 0.55 ]
}, {
duration: 800,
loop: 1,
delay: 3000
});
3D CSS primer
Let’s begin the first of the two animation sections of the codebase by focusing on the
element that contains the circle elements. Before diving into the code, however, here’s a
primer on how 3D animation works in the browser:
In order for 3D transforms to work (for example, translateZ, rotateX,
rotateY), the CSS specification requires that the perspective CSS property be set