Speeds BG

Description:

Four images sit on top of each other. The middle 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. Both the “faster” and “slower” layers should be semi-transparent for all the layers to be seen. The top one is a static transparent image that holds the Call To Action. The bottom layer (“bg”) is a static background to the other layers. The middle two, “faster” and “slower” sit under “top” and over “bg”,, 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).

#BG(300X250px)

Static background to the layers on top of it.

#Static(300X250px)

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