Table of Contents
In this tutorial, I will show you how to replicate this "split scroll" design, where sticky images on one side, are "reverse scrolling" as content on the other side is scrolling normally.
See the demo here:
Features:
- Works with sections & columns, or containers
- Works with any amount of images
- Works with the normal "Image element", so it's lazy-load compatible
- Works on desktop and tablet (could work on mobile too, however it's not ideal due to the narrow viewport)
- Performant animation
- No JS dependencies
Let's get started!
First, import the template on the page where you want this
It's easier to start from the template for this tutorial.
Choose the template that you want, you have the choice between the "Container" version, or the "Section" version.
This is a premium tutorial. Purchase access to unlock the full tutorial and download the template.
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
Looking for something else? Search across 2445 Elements right here:
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
Comments
2 Responses
where i put dis code ? :
html body{
overflow:hidden;
}
html{
overflow-x: hidden;
overflow-y:auto;
height: 100vh;
}
This is CSS, you can add it anywhere that will be specific to this page, such as page settings > Advanced > Custom CSS