on the element’s parent. In this case, that’s what the $container element is for.
The greater the value that perspective is set to, the less distance Z-axis translations
(via CSS’s translateZ) appear to move relative to their origin. In other words, if you
want more exaggerated depth in your 3D animations, set the parent element’s
perspective property to something low, such as 50px, which is in fact the value that
the container element is set to in the demo’s CSS. In contrast, a higher perspective
value, such as 250px, would result in less visible movement from the origin point for
every pixel that the element’s translateZ property is incremented by.
A separate and complementary CSS property is prospective-origin, which
defines the angle at which the virtual camera is positioned. The virtual camera is the
peephole through which the viewer sees 3D animation unfold in the browser. This
section’s code block uses jQuery’s $.css() function to set a perspective-origin
value on the container element that results in the camera being positioned at the center of
the page, creating a perpendicular view of the 3D animation. This perpendicular view
results in the appearance of circles flying directly toward and away from the viewer.
Specifically, this code section sets perspective-origin to the point on the page
that’s at half the browser’s height and half its width—the center point of the page. This
leverages the window dimensions queried in the Animation setup section.
With that context out of the way, let’s explore this section’s code.Properties
This section’s code, reproduced below for easy reference, creates the demo’s zooming in
and out effect:
Click here to view code image
$container
.css(“perspective-origin”, screenWidth/2 + “px ” + screenHeight/2 + “px”)
.velocity(
{
perspective: [ 215, 50 ],
opacity: [ 0.90, 0.55 ]
}, {
duration: 800,
loop: 1,
delay: 3250
});
While the prospective-origin property is set once on the container element and
thereafter left alone, the prospective property is being animated by Velocity. This is
necessary because the intended effect of the demo is to keep the vantage point into the
scene stationary (perpendicular), but to exaggerate then de-exaggerate the distance of the
elements from the virtual camera, which is where the perspective property’s
animation comes in.
Specifically, this section uses Velocity to animate the perspective CSS property to
a final value of 215px from a starting value of 50px.
By passing in an array as an animation property’s value, you’re forcefully specifying