translateX: [
function() { return “+=” + r(-screenWidth/2.5, screenWidth/2.5) },
function() { return r(0, screenWidth) }
],
translateY: [
function() { return “+=” + r(-screenHeight/2.75, screenHeight/2.75)
},
function() { return r(0, screenHeight) }
],
translateZ: [
function() { return “+=” + r(translateZMin, translateZMax) },
function() { return r(translateZMin, translateZMax) }
]
}, { duration: 6000 })
.velocity(“reverse”, { easing: “easeOutQuad” })
.velocity({ opacity: 0 }, 2000);Code section: Animation setup
This section’s code is copied below for easy reference:
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;
The first section, Animation setup, begins by defining a function r (abbreviated from
"random") that lets you artificially constrain randomly generated integer values. This
function takes min and max parameters, then outputs a random number between the min
to max range (using some basic algebra). You’ll use this later when randomizing the
animating elements’ CSS transform values within ranges that are predefined in the
next two code blocks.
The next section queries the window object to retrieve the monitor’s dimensions. By
later referencing these values, you can ensure that the circles don’t animate too far off-
screen (and consequently out of view).
Animation setup concludes by defining the min and max values for the elements’ Z-
axis movement. These values control how small (far away) or large (nearby) you want the
circles to animate from their initial size. Specifically, it dictates that the circles can go as
far as 725 pixels along the Z-axis away from the virtual camera (away from the screen),
and as close as 600 pixels toward the camera. In this case, there’s no constraint of going
off-screen, but the circle could become too distant to see or so close that it takes up the
entire monitor. Basically, it’s a creative decision.