In this tutorial, you will learn how to create an Elementor design where we have images that become sticky, one image zooms in to fill the screen, and then the scroll keeps going normally.
It's not easy to explain, so here is the demo (scroll down all the way):
On mobile, the images stack:
A premium user sent me this website and asked if I had a tutorial for this. I didn't, so I created this.
- Story telling design: Ideal for product features, service presentations, or even educational websites
- Performant: No dependencies code, makes this as lightweight as could possibly be
- Customize: Adjust the size of the images and the spacing between them as you need
- Responsive: Have different images on desktop and mobile, for optimal layout
- Works with 2, 3 or 4 images: It could work with more images too, however I think it would get annoying to the user beyond 3-4 sections like this
Let's get started!