How to Add Horizontal Scrolling Effects to Any Image with Elementor

This blog post is going to teach you how to add a horizontal scrolling effect to any image within Elementor. An user in the elementor community raised a question, how to achieve scrolling effect of a ship when user scrolls the page. In this tutorial, we'll walk through the process of adding a horizontal scrolling effect as well as some tips on making sure your design looks great with this type of interaction.

There are plenty more tutorials on our website that will teach you about different features in Elementor!

Lets get started.

Creating a horizontal scrolling effect on image

So above is the image of the boat. we will first remove the background of the ship. you can use online tools like remove.bg to remove it.

Step 1: Now create or open the page you wish to add this.

Step 2: Move to the section you need to add.

Step 3: Add the background to the section and make sure to set the Section's overflow to hidden, while also setting a min-height to the section.

Step 4: Add the boat image as a normal Image widget.

Step 5: Change the widget's Advanced > Positioning to Absolute, and align it to the right, then enable the Motion Effect for scrolling.

That's it! You now have a horizontal scrolling effect on ship with Elementor. Scrolling the page will cause the boat to move from right to left. For best results, try to use large images and make sure your section has enough height set so that the entire image is visible at all times.

Also adjust the padding of the image to make it perfect.

Similarly, you can add vertical scrolling effect to any other image to make the page more appealing.

The Bottom Line

Elementor is a powerful WordPress page builder that lets you create custom designs for your website without any coding required. With Elementor, you can add horizontal and vertical scrolling effects to any image on your page in just a few clicks. Give it a try today!

If you found this post helpful, please share it with others who might find it useful too. And don't forget to follow us on Facebook and Twitter for more helpful tips and tutorials.

Thank you!