- Circle animation: The code responsible for animating the circle elements
themselves.
Try to familiarize yourself with the broader strokes of the demo’s implementation so
you can keep its full context in mind as you explore each individual code block in the
upcoming sections:
Click here to view code image
/****
Animation setup
****/
/ Randomly generate an integer between two numbers. /
function r (min, max) {
return Math.floor(Math.random() (max - min + 1)) + min;
}
/ Query the window’s dimensions. /
var screenWidth = window.screen.availWidth,
screenHeight = window.screen.availHeight;
/ Define the z-axis animation range. */
var translateZMin = -725,
translateZMax = 600;
/**********************
Circle creation
**********************/
var circleCount = 250,
circlesHtml = ””,
$circles = ””;
for (var i = 0; i < circleCount; i++) {
circlesHtml += “<div class=‘circle’></div>”;
}
$circle = $(circlesHtml);/******************************
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
});/***************************
Circle animation
***************************/
$circles
.appendTo($container)
.velocity({
opacity: [
function() { return Math.random() },
function() { return Math.random() + 0.1 }
],