Fade and Slide

Description:

Four images sit on top of each other. The top one is a static transparent image that holds the Call To Action. The other three, “fade3”, “fade2” and “fade1” sit under it, and they move and change opacity together with the user’s scroll. First to be seen is “fade1”, which then fades to expose “fade2”, which then also fades to show “fade3”. Great to demonstrate three 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.

#Fade3(300X450px)

Final state or result of transformation.

#Fade2(300X450px)

Middle of transformation. Fades out as the user scrolls down

#Fade1(300X450px)

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.