The Sticky Section
with Horizontal Scrolling Template

The next section takes up the full viewport and will stick on top, until the horizontal scrolling ends. The section then unsticks and the scrolling resumes. It works with the CSS Sticky property and IX2 for the horizontal scrolling.

Check the structure and instructions down the page.

Duplicate this template

↓ Scroll Down to see the effect in action

Check the CMS version

Sticky section
‍With horizontal scrolling

Non Beatae Dignissimos Optio
Non
Magnam Incidunt Quod Rerum
Eaque Quia Excepturi Sapiente
Sed Debitis
Aut Soluta
Autem
Doloremque
Laborum Sit
Distinctio Aut Nemo
Minima Natus
Odit Architecto Aut Sunt
Reprehenderit Ex Fugit

The width of the content div is equal to the height of its parent section. The parent section is used as a trigger and controller for the horizontal scrolling of the content div. Having those two elements the same scrollable size makes the feeling of the scrolling natural. By shortening or enlarging the Scroll Trigger div, you can accelerate or decelerate the horizontal scrolling effect.