Click here to view code image
$element.velocity({
// Animate backgroundColor to the hex value for black
backgroundColor: “#000000”,
// Simultaneously animate the alpha (opacity) of the background to 50%
backgroundColorAlpha: 0.5,
// Also animate the red component of the element’s text color to half its
total value
colorRed: 125
});
Transforms
The CSS transform property performs translation, scale, and rotation manipulations to
elements in both 2D and 3D space. It consists of several subcomponents, of which
Velocity supports the following:
translateX: Move an element along the x-axis.
translateY: Move an element along the y-axis.
rotateZ: Rotate an element along the z-axis (effectively clockwise or counter-
clockwise on a 2D surface).
rotateX: Rotate an element along the x-axis (effectively toward or away from the
user in 3D space).
rotateY: Rotate an element along the y-axis (effectively leftward or rightward in
3D space).
scaleX: Multiply the width dimension of an element.
scaleY: Multiply the height dimension of an element.
In Velocity, you animate these components as individual properties within a property
object:
$element.velocity({
translateZ: “200px”,
rotateZ: “45deg”
});Using Velocity: Without jQuery (intermediate)
If you’re an intermediate developer who prefers to work in JavaScript without the aid of
jQuery, you’ll be happy to know that Velocity also works when jQuery is not present on
the page. Accordingly, instead of chaining an animation call onto a jQuery element object
—as shown in the previous examples in this chapter—the targeted element(s) are passed
directly into the animation call as the first argument:
Click here to view code image
Velocity(element, { opacity: 0.5 }, 1000); // Velocity
Velocity retains the same syntax as jQuery’s $.animate() even when it’s used
without jQuery; the difference is that all arguments are shifted one position to the right to
make room for passing in the targeted elements in the first position. Further, the global