/* Theme Name: Woodmart Child Description: Woodmart Child Theme Author: XTemos Author URI: http://xtemos.com Template: woodmart Version: 1.0.0 Text Domain: woodmart */ Learn CSS Sticky Image Scrolling Text Effect in Elementor and CSS In this tutorial, you will learn how to do a cool sticky image effect, where the sticky images change on one side while you scroll through the text. Let’s see how to do that using Elementor and pure CSS – no JavaScript or plugins! sticky-image-scrolling-text-effect-preview Watch the video below or scroll down to grab the CSS code used! First, add your containers (using Flexbox in Elementor) We are using flexbox containers in Elementor Pro, so fist add a new container (let’s call it container A) and make sure that the items inside are stacked vertically (as they probably will already be by default). To do so, go to Layout > Items > Direction and check the vertical down arrow. Inside this container, create another container (let’s call it container B). This container will be the box that will hold our first slide – including our image in the left column and text on the right side. elementor-flex-container-structure Use the Structure or Navigator to organize your widgets! We will call this first container B “First slide” in the Structure panel. Right-click anywhere on your Elementor page and go to “Structure” to open the Navigator sidebar. You can then change the name of this container in the Structure panel to “First slide”. navigator-structure-first-slide Inside this container, you will create two containers – one for each column. The left container will hold our image and the right one will hold our text (or multiple widgets). Set the stacking to horizontal (or rows). flex-container-horizontal-row-direction Add the content for the first slide In the left column (container), add the image widget, select your image and give this image widget a class “first-screen“. Don’t know where to add a CSS class? Check below: adding-custom-css-class-elementor The Elementor settings we will be adjusting for these image widgets for each screen are: adding CSS classes, z-index and motion effects (sticky, sticky offset and effects offset). In the right column, add your widgets like text, heading or whatever you need. Set the image to sticky Select the image widget on the left and in the ‘Advanced’ > Motion effects > set it to “Sticky” (Top). Then, apply the sticky effect on desktop only (remove mobile and tablet) and set the sticky offset to something like 200. This sticky offset is the value in pixels that basically represents the distance between the top of your sticky image and the top of your viewport. You then have to set the effects offset. The effect offset value will depend on your section height and your image height and you should experiment with this value to find the best that fits. It should approximately be your slider section (or image) height + some default or set paddings on top and bottom and row gaps between the containers. You can use Inspect elements to find the exact or approximate height. Let’s say that your image height is something like 375px – in that case you can try with something like 420px depending on these gaps and paddings. Try different values for the effects offset to find the proper value – it doesn’t have to be pixel perfect and the effect will still work! motion-effects-elementor-sticky-settings-middle-sections Lastly, set the z-index of this image widget to 2 for example. Duplicate the container B (first slide) Next, duplicate the container for the first slide (remember how we named this container in the Structure or Navigator panel for better organization?) to create the second slide. Change your image and your text as necessary and change the class of your image widget here to “middle-screen“. We are supposing that you have at least 3 images and 3 scrolling sections. In the Advanced panel under Motion effects, use the same sticky offset and effects offset like for the first screen – no need to change anything here! Set the z-index of this image widget to something bigger than the first image z-index, for example 3. Duplicate this middle screen (container B) to create as many middle slides as needed These will be the slides in the middle – not the last slide! We will style that one below. Finally, duplicate this container B to create the last slide Change the class of the image widget in this last container to class “last-screen“. This is how our final container structure looks like now: final-container-structure In Advanced > Motion effects, leave the sticky offset to 200 (it should be the same for all the images!), but remove the effects offset. Set this effects offset to 0 and toggle the ‘Stay in Column’ to ‘Yes’. This will make sure that after we are done scrolling with text, this last image continues scrolling with it and we move on to the next section on our page. motion-effects-sticky-settings-last-section If the image is showing below the previous slide image, make sure that the z-index of this last image has the highest value – for example 5. Publish the changes and add the CSS code! Now that we’ve set up our structure and added the sticky effects in Elementor, it’s time to add the CSS code that will actually create this effect. I am using Simple Custom JS and CSS plugin. If you were using the same CSS class names like I did above, add this code below and keep on reading to see what exactly each line means! Note – try using the !important tag if needed!