What is a progress based parallax?

All animations in Imagine are based on current scrolling progress. The syntax for scroll progress based animations is the following:

$('.imagine').imagine({
  animation: "animation-name progress-factor animation-mode"
});

animation-name

The animation-name keyword refers one of the available scrolling animations: opacity, x, y, z, scale, scaleX, scaleY, rotation, rotationX, rotationY, rotationZ, skewX and skewY.

progress-factor

The progress-factor keyword (optional) is a multiplier which can make the animation slower or faster. You can use negative values to invert the animation. As an example, using a multiplier of 1 for the y (vertical axis) animation, means the background will scroll at the same speed as the page scrolls. A multiplier of 0.5 will scroll at half the speed.

animation-mode

The animation-mode keyword (optional) can take the values default, to-middle and from-middle for all animations or up and down for scaling animations.

The mode to-middle tells the plugin it should only animate until the middle of the element matches the middle of the current visible area of the screen. The mode from-middle tells the plugin it should start animation from there. This is especially useful when using from-to animations which we will cover next.

This means we’ll have a beautiful parallax animation and the text/element will be completely readable and static once it’s in focus, in the middle of the view.

Here’s an example:

$('.imagine').imagine({
  animation: "y 0.5 from-middle"
});

What is a range based parallax?

Imagine allows you to use range based animations using current scrolling progress. The values in a range based animation are fixed values, not progress multipliers. The syntax for range progress based animations is the following:

$('.imagine').imagine({
  animation: "animation-name from..to animation-mode"
});

As you can see, we’re using an ellipsis to request a range based animation.

animation-name

The animation-name keyword refers one of the available scrolling animations: opacity, x, y, z, scale, scaleX, scaleY, rotation, rotationX, rotationY, rotationZ, skewX and skewY.

from

The from keyword is the starting value which the element takes when it first appears on the screen.

to

The to keyword is the ending value which the element takes when it goes out of the current view.

animation-mode

The animation-mode keyword (optional) can take the values default, to-middle and from-middle for all animations or up and down for scaling animations. The same principles from progress based animation apply here.

Here’s an example:

$('.imagine').imagine({
  animation: "y 300..0 to-middle"
});