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 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
- Uses containers
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.
This is a premium tutorial. Purchase access to unlock the full tutorial and download the template.
10 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
hi i am not able to paste the template via paste - do you have an option for template download? thanks in advance!
Yes certainly, sent it to you via email.
Cheers!
Hi, Maxime, 'cause I need support to invoice.
How can I do?
Greetings,
Sorry, what are you asking here? I don't understand...
Hi, Maxime.
In responsive don't work
https://share.vidyard.com/watch/oX6wt7gM62a8jkNNoYHpG1?
Greetings,
Add this CSS under the Advanced > Custom CSS for the images that you want to be smaller:
Let me know if that works!
Much better, but the responsive still don't responded:
https://share.vidyard.com/watch/uXP9SKgdeDaRoPrUoNhXCf?
I got it's.
Maxime Thanks a lot!
When you do this: https://dribbble.com/shots/7129691--Blue-Planet-Carousel-Concept
Tell me to buy! 🙂