Hi guys today we're going to see how to add parallax scrolling
effects to your website
Let's say you have a website now instead of the normal scrolling feature,
you want to have a special effect like this, which looks more attractive.
You can do that by watching this video.
So after watching this video, you will be able to add different
scrolling effects to your product images, texts and the background of your site.
This will help you get a lot of potential from your visitors and it will encourage them to check
your content. I am Bryan from Website Learners
And let's add the scrolling effects to our site.
First, let's go to our website.
Here it is.
And I'm going to add the effects to this site, So to add
parallax scrolling effects,
We are going to do three steps.
The first step is to get the element pro plugin.
This plugin will help us add different types of scrolling effects.
to our content
So to get the element pro plugin, just click the link in the description,
and it'll take you to this page.
Here you can use any of these plans. Since I have only one website
I'm going to choose this plan.
So let's click buy now,
and it will ask you to create an account.
So to create the account, let's fill in these details here, enter the email address
That you use to create your website.
Now, let's enter these details and then scroll down.
Now to get the plugin, just enter your cart details
and click check out.
You can see that we have purchased the plugin and we can now download our plugin.
So let's click download
And the plugin will be downloaded to your computer. So now we have successfully got the elementor pro plugin.
Once you have got the plugin, we can now go to step two,
which is to install the plugin.
So to install the plugin, let's go to our WordPress dashboard,
then go to plugins, click add new, and you will get this page. Now click upload
And then drag the plugin and drop it here.
You can see that the plugin has been uploaded to our site,
now to install it, just click install
And click activate
so we have successfully installed the plugin. now in order to use this plugin, it will ask
you to connect and activate the plugin.
So to activate it, just click here
And then click activate.
You can see that the plugin is now active on our site.
This means that we can now start using the plugin.
So next let's go to step three, which is to add the schooling effects to our
site. To add the scrolling effects,
First, let's go to our site, now let's say you want to add the effects to this page.
just click edit with elementor
and it'll take you to this page.
Now to add a scrolling effect to an image like this, just click on the image
and go to advanced. Now click on motion effects and turn on exploring effects.
Here, you can see the different types of effects that you can add to your image.
I'm going to add a vertical scroll to this image.
So to add it, just click here
and then change the direction to "Down"
You can also adjust the speed of the effect by moving the slider,
I'm going to change it to 5.
Now we have added a vertical scroll effect to this image.
So to check it, just scroll down this page.
You can see that the image also moves.
Now, if you keep scrolling down, you can see that the image has moved out of its section.
To stop it from moving out of its section,
go back here
And adjust the slider under viewport till the image is inside this section.
Now to preview the change, just click here
now if you scroll down, you can see the image moving and it stops once
it reaches the end of the section.
So now you know how to add scrolling effects to your image.
Next, let's see how to add scrolling effects to the text like this.
So to add scrolling effects to this text,
just click on the text like we did before
go to advanced click motion effects and enable
scrolling effects. Here,
I'm going to add a horizontal scroll effect to my text.
So let's click here now, here you can adjust the speed of this movement.
Now if you scroll the page, You can see that the text has moved to the left. To bring it back to the center,
adjust the viewport until the text moves back to its place
to preview the change,
Just click here. Now if you scroll down, you can see the scrolling effects on the text.
You can also add a fade effect like this for the text to make the effect look better.
So to do that, lets click here then click transparency and the fade-in effect
will be added. So now if we scroll the page,
You can see that we have got the fade-in effect on the text
And as you can see, the text is still faded. To make it visible,
just adjust this view port
Now to see how it looks,
Just click here.
And if you scroll the page, you can see that the fade-in effect
has been added to the text.
In the same way, you can add the scrolling affects to any text on your site.
Next let's see how
you can add animation effects to these texts
So to add effects to this text like we did before just click on it
Now go to advance, click motion effects and enable the scrolling effects.
Select the name of scroll
You want to add. I'm going to select horizontal scroll. Like we did
before you can adjust the speed of the text effects here,
and you can set the position by changing the viewport
Now, let's add the fade-in effect to this text.
So let's click on transparency.
As you can see, the fade-in effect has been added to the text.
Now you can adjust the viewpoint here.
Once you're done just click here.
Now, if you scroll the page, you can see that we have got the effects on the text which we added
Now in the same way, you can add the effects for these texts.
So now you know how to add animation effects to your texts on your website.
Next, let's see, you can add mouse effects to this image.
Once you do this, if you place the mouse on the image, your image will move like this
So to add the mouse effects to this image, just click on the image.
Go to advance.
And click motion effects. Now enable most effects, and then click here.
Now, if you place the mouse on the image, you can see that the image moves when
you move the mouse over the image
Now, you can also add a 3d effect to make this animation even better.
So to do that just click here
As you can see the image has been tilted.
You can also adjust the speed here
once you're done,
Let's see how this image looks.
So let's click here.
Now, if you place the mouse over the image, you can see that we have got the mouse effects on the image.
So, this is how you can add mouse effects to the image on your site.
Next.
Let's see.
how you can add background effects like this on your site
As you can see if you scroll the page, the background image is fixed.
only the content is moving. Now to add scrolling effects to your background,
First, you need to fix the background in the section.
So to fix the background, let's go to our site and go to the section
where you want to add the effect
Let's say you want to add the background effect to the section.
All you have to do is just click here
Now go to style, click on attachment and select fixed.
Now, if you scroll the page, you can see that the background is fixed.
Now to add scrolling effects to this background,
just click here.
Now, scroll down like we did before you can use these effects
for your background. Here,
I'm going to use the "Scale effect" for my background
So just click here, and you can see that the image size of
the background has been changed.
Now, like we did before you can adjust the speed and the viewport.
Okay, once you've added the scale effect, let's see the preview.
So just click here
and if you scroll down, you can see that we have got the scrolling effects
for our background. In the same way,
You can add scrolling effects to the section like this.
Once you're done, now to save the changes click update
And your content will be updated with the new effects.
So now if you go to our site,
click refresh
and scroll down, you can see all the effects that you had added.
So that's it guys, this is how you can add the parallax scrolling effects to your site.
So to get this effect, you need to have the elementor pro plugin.
To get the plugin, just click the link below this vide.
Also make sure you subscribe to Website Learners to get more videos like this one
Thanks for watching.
I'll see you in the next video.
Take care.
Bye-bye.