Speeds

Description:

Three images sit on top of each other. The bottom two layers also move with the user’s scroll, using two speeds, both in the direction of the scroll. Both moving layers stay on top of each other and move together, but at different speeds. The “faster” layer should be semi-transparent for the “slower” layer to be seen. The top one is a static transparent image that holds the Call To Action. The other two, “faster” and “slower” sit under it, and move with the scrolling motion. Great way to capture the user’s attention and create depth illusions.

Structure

#Top(300X250px)

Transparent png containing the call to action, and stays stationary while scrolling. Top layer in layer ordering.

#Faster(300X1600px)

Fast moving layer, longer than the rest. Should be semi transparent for the “slower” layer to be seen.

#Slower(300X800px)

Slower moving layer (but still faster than the rest of the page).

#Static(300X250px)

A fallback for older devices (below iOS8 or android 4.3) that do not support Cronus.