In this tutorial, I will show you how to create this nice effect where the featured images shows up on scroll. We will be using the Elementor Loop Grid element, and a custom loop.
See the demos here:
Please note that it works better when visiting the demo page directly here, because this uses the intersection observer API.
Features:
- Works well on mobile too!
- Smooth fade in/out of images
- Fully dynamic
- Ideal for portfolios
- Get creative with your layout!
- Easy to replicate: copy paste the templates
The Flex Container feature needs to be activated for this tutorial to work.
Let's get started!
First, let's get our loop template created
This is a premium tutorial. Purchase access to unlock the full tutorial.
One Response
Hi, I'm trying to make Example 2.3 work for me It looks great on desktop
, but on mobile, the container with the title is not staying in the same place like in the demo.
The container with the text does not change and remains static, but moves down with scrolling.
I have a feeling it has to do with the size of the image
Can you point me in the right direction I really want to implement this on my site
thank you