Speeds BG

This template's assets
All the templates assets

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.

All the templates:

Before After template

Before After

Before After Sliding template

Before After Sliding

Half and Half template

Half and Half

Fade and Slide template

Fade and Slide

ade and Slide with BG template

Fade and Slide with BG

Single template

Single

Single Reverse template

Single Reverse

Single Fixed template

Single Fixed

Single Fixed Reverse template

Single Fixed Reverse

Speeds template

Speeds

Speeds Reverse template

Speeds Reverse

Speeds BG template

Speeds BG

Speeds BG Reverse

Speeds BG Reverse