Four images sit on top of each other. The middle two layers also move and change their opacity with the scroll, according to their screen position. The top one is a static transparent image that holds the Call To Action. The bottom is also static, and holds the background image/color.
The middle two layers, “before” and “after” sit under it. By the time the content is scrolled half-way up (the ad is at the middle of the screen), the “before” becomes completely transparent and shows the “after” that sits under it. Both layers also move together with the user’s scroll. Great to demonstrate two interchangeable states – before/after restoration, transformation, with/without product, etc.

#Top(300X250px)
Transparent png containing the call to action, and stays stationary while scrolling. Top layer in layer ordering.

#After(300X250px)
Final state or result of transformation. Fades in as the user scrolls down.

#Before(300X250px)
Initialstate or beginning of transformation. Fades out as the user scrolls down.

#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.

There images sit on top of each other. The bottom two layers also move with the user’s scroll, using two speeds, both in the opposite 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 but in the opposite direction to is. Great way to capture the user’s attention and create depth illusions.

#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.

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 opposite 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 but in the opposite direction to is. Great way to capture the user’s attention and create depth illusions.

#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” and “bg” layers to be seen.

#Slower(300X800px)
Slower moving layer (but still faster than the rest of the page). Should be semi transparent for the “bg” layer to be seen.

#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.

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.

#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” and “bg” layers to be seen.

#Slower(300X800px)
Slower moving layer (but still faster than the rest of the page). Should be semi transparent for the “bg” layer to be seen.

#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.

There 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.

#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.

The simplest form of using Cronus – a single long image that moves opposite to the scrolling direction of the page. This template allows the presentation of almost 5 times more information in the same allocated space of 300X250 pixels.

#Long(300X1200px)
A long graphical asset containing all the messages the content should convey.

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

A fixed transparent background non animated Call To Action, that sits on top of a single long image which moves opposite to the scrolling direction of the page.

#Top(300X250px)
Transparent png containing the call to action, and stays stationary while scrolling. Top layer in layer ordering.

#Background(300X1200px)
A long graphical asset containing the moving background part of the content.

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

A fixed transparent background non animated Call To Action, that sits on top of a single long image that moves faster than the rest of the page, in the same scrolling direction as the page.

#Top(300X250px)
Transparent png containing the call to action, and stays stationary while scrolling. Top layer in layer ordering.

#Background(300X1200px)
A long graphical asset containing the moving background part of the content.

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

The simplest form of using Cronus – a single long image that moves faster than the rest of the page, in the same scrolling direction as the page. This template allows the presentation of almost 5 times more information in the same allocated space of 300X250 pixels.

#Long(300X1200px)
A long graphical asset containing all the messages the content should convey.

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