How To Add A Parallax Scrolling Effect in WordPress

Parallax scrolling is a design concept that gives the illusion that elements on a page are moving at different speeds & directions. It provides a 3D-like effect. And adds depth to a website by creating a visual illusion.

In this video, you will learn how to add parallax scrolling, to your website in just 3 steps. ✔️
So let's get started! 👇

🎬 𝗧𝗮𝗯𝗹𝗲 𝗼𝗳 𝗖𝗼𝗻𝘁𝗲𝗻𝘁𝘀
00:00 Intro
00:47 Get the Elementor Pro Plugin
01:52 Install the Plugin
03:07 Add the scrolling effects to your site
08:11 Add mouse effect to images
09:34 Add fixed background with moving content

📌 𝗙𝗼𝗹𝗹𝗼𝘄 𝘁𝗵𝗲𝘀𝗲 𝘀𝗶𝗺𝗽𝗹𝗲 𝘀𝘁𝗲𝗽𝘀

𝗦𝘁𝗲𝗽 𝟭: Get the Elementor Pro Plugin
choose your plan & click ‘buy now’
Once you have purchased, click ‘Download’.

𝗦𝘁𝗲𝗽 𝟮: Install the Plugin
Go to WordPress dashboard ► Plugins ► Add new
Now click ‘Upload’, & add the Elementor plugin and click Install & Activate’.
To use the plugin, click ‘Connect & activate’.

𝗦𝘁𝗲𝗽 𝟯: Add the Scrolling Effects to your Site
Go to your site, and click ‘Edit with Elementor’,
To add a scrolling effect to the image, click on the image.
Go to Advance ► Motion Effects and turn on ‘scrolling effects’.
Now select the scrolling effect and adjust the speed and direction of the effect.

To add fade-in effect, click ‘Transparency’ and adjust the viewport.
Next, to add mouse effect to the image, click on the image
Go to Advance ► Motion effect & enable ‘Mouse effect’
To add 3D effect by select ‘3D tilt’ & adjust the effect.

Next, To add fixed background effect with moving content
Just click on the section, click ‘style & Attachment’, And select fixed.
To add a scrolling effect, enable scrolling and select your effect.
Once done making changes, click ‘Update’.

So this is how you can add (parallax) scrolling effects to your site.

🎁 𝗧𝗼𝗼𝗹𝘀 & 𝗗𝗶𝘀𝗰𝗼𝘂𝗻𝘁𝘀

❤️ 𝗢𝘂𝗿 𝗥𝗲𝗰𝗼𝗺𝗺𝗲𝗻𝗱𝗲𝗱 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀 𝗧𝗼𝗼𝗹𝘀

🔥 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗚𝘂𝗶𝗱𝗲 - 𝗦𝗶𝗺𝗽𝗹𝗲 & 𝗘𝗮𝘀𝘆 𝗦𝘁𝗲𝗽𝘀 𝘁𝗼 𝗹𝗮𝘂𝗻𝗰𝗵 𝘆𝗼𝘂𝗿 𝗳𝗶𝗿𝘀𝘁 𝗪𝗲𝗯𝘀𝗶𝘁𝗲

🎓 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝘁𝗼 𝗴𝗲𝘁 𝗯𝗲𝘁𝘁𝗲𝗿 𝗮𝘁 𝗪𝗼𝗿𝗱𝗣𝗿𝗲𝘀𝘀

🙌 𝗢𝗳𝗳𝗶𝗰𝗶𝗮𝗹𝗹𝘆:

👍 𝗙𝗼𝗹𝗹𝗼𝘄 & 💬 𝗖𝗵𝗮𝘁 𝘄𝗶𝘁𝗵 𝘂𝘀:

[WebsiteLearners]

*🚀 Check out these tools made by Website Learners*:

😥 Save Time Let AI Write For You ➜ Visit GravityWrite.com _(Rated 4.7/5 by customers)_
⚡ Get Lightning Fast Website at WebSpaceKit ➜ WebSpaceKit.com/offer

Thanks for watching! 🙌 If this tutorial helped you add an awesome parallax scrolling effect to your WordPress site, share a link to your site in the comments. I'd love to see what you created! 😎

[yourtrinty]

I cannot express how this video just helped me. Just saved my day. Thanks a lot, Website Learners💚

[risingstardelhi]

Thanks Brian for fantastic tutorial I’m glad to see you here😇😇✅🥳🥳

[flajsch]

Your videos are just too good, all of them are helping me. Thank you very much

[cybercrazy]

The best tutorial so far about motion and parallax.. no long winded explanation. Great job!

[ubeejames]

Thank you for this great video sir.
Well and detailed explanation.
An amazing tutorial from a great teacher

[dharendrakumar]

Best tutorial videos on the internet....🤘

[mutaharjamil]

Hi Brain. Thanks man for letting us know about these effects. I didn't know how to use it even though see it every time while doing customization.

[hammadali]

You are awesome looking for this type of information

[levi.ackerman..]

Hi Brian, the video is useful, to the point and minimalism.
Could you please tell the accounting processes for a e-commerce website for accounting.

[viraajgupta]

Location wise multi vendor product delivery system like zomato, swigy

[InfoTrendProduct]

With your videos I'm gonna be the master of web development ❤️👍🏻🔥

[sherugejames]

Wow SIR, Don't leave it and keep it up

[ODINCODES]

Guys, would you please share with us how you build such great video tutorials? just name the apps will be sufficient as well.

[gagandeepsingh]

Hey, Thanks for the video it's very helpful. Please tell me do these effects work on mobile view also?

[harpalsingharmo]

Hiii Brian can you please mention the theme you used in this website its really gorgeous

[lydiadarla]

Hi. Can you please explain about the tax system in a woocommerce website? Do we need to upload the invoice files in the GST site for GA-1 etc? Or adding the GST during the shipping is enough?

[mastanshaik]

Hii brian shoukd you clarify my doubt after finishing our hosting and domain plan then how can we re buy a pan for our website make a video on this

[horizonmediamanagement]

I ran into an issue with the fixed background when I accessed my website on a phone. The fixed option doesnt work on phones from what elementor tells me..any tips? Thanks for the video!

[rupengala]

Hi Brian. Thanks for the great videos. Can you help me understand which plugin to be used for making multi step 3D / animated product development wherein users can put their own dimensions instead of predefined dimensions & variables?