Before-After Sliding

This template's assets
All the templates assets

Description:

Three images sit on top of each other. The bottom 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 other two, “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.


Structure

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

#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