Sticky image changing on text scroll in Elementor and CSS | Change fixed image in scrolling section
In this video tutorial, we are creating a cool sticky image effect, where the sticky images change on one side while you scroll through the text in the other column. Just Elementor and pure CSS - no JavaScript or plugins!
We want to achieve that the text in one column is moving on scroll, but the images in the other column stay fixed or pinned and change as we scroll through each section.
We are using flexbox containers in Elementor and applying the classes to our image widgets inside the columns of these containers.
Then, we will use motion effects and the sticky property on this image widget for each section and modify the following settings: desktop only, we will add the sticky offset and the effects offset.
The sticky offset will give us the distance between the top of our sticky image and the top of our viewport.
The effects offset will determine when our image basically disappears and when it becomes "replaced" with the next one.
Lastly, we will be using z-index and apply the 'Stay in column' sticky property to our last image.
After using these sticky settings on our images and applying classes to them, we will then go to CSS and apply a few lines of code. This CSS will change the opacity setting of different image classes at different moments, as well as active sticky class (elementor-sticky--active) and effect offset behaviour (elementor-sticky--effects). We will then use some subtle transition property and we are all set!
💻 Read the blog post and grab the CSS code here:
https://www.cssgamelab.com/2024/12/05...
🚀 Interactive CSS Basics course for designers and non-coders:
https://www.cssgamelab.com/
👉 Get 20% off using the code VELVET20OFF at Checkout.
––––––––––––––––––––––––––––––
PURCHASE AND DOWNLOAD ELEMENTOR PRO to build websites without coding:
https://be.elementor.com/visit/?bta=6...
––––––––––––––––––––––––––––––
Have fun and thanks for watching!
If this tutorial helped you, please share or subscribe.
––––––––––––––––––––––––––––––
This video and description may contain affiliate links. If you click on a link and make a purchase, I will receive a commission from the sale. That way you are supporting my channel and allowing me to keep making videos and posts like this. I only promote products that I use, have experience with and support, such as Elementor Pro.
––––––––––––––––––––––––––––––
Have a specific problem in Elementor or CSS that you don't know how to solve? Comment below to let me know which video you would like to see next!
––––––––––––––––––––––––––––––
