3D Curtain Template with CSS3 & jQuery

Advertisement

Another great tutorial from Codyhouse.A list of split blocks that reunite on scrolling, simulating a movement along the z-axis with the help of CSS transformations and jQuery.

The 2-blocks design approach is quite common nowadays. On one side the text paragraph, on the other a visual element. With this nugget Codyhouse tried to “spice-up” the transition between the sections by simulating a movement along the z-axis while the user is scrolling (or using the 2 navigation buttons).

No CSS 3D property though, just the Scale and Translate transformations, controlled through jQuery.

Use your mouse wheel.
curtain-template-featured

Demo    Download