How to add parallax scroll in website

  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 likethis, which looks more attractive. You can do that by see this article. This will help you get a lot ofpotential from your visitors and it will encourage them to check your content. I am anujpr from prmotivationpr.blogspot.com And let's add the scrollingeffects to our site. First, let's go to our website. Here it is. And I'm going to add theeffects to this site, So to add parallax scrolling effects, We are going to do three steps. The first step is to getthe element pro plugin. This plugin will help us adddifferent 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 fillin 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 theplugin 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'sgo to our WordPress dashboard, then go to plugins, click addnew, 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 pluginis now active on our site. This means that we can nowstart using the plugin. So next let's go to step three, whichis to add the schooling effects to our site. To add the scrolling effects, First, let's go to our site, now let'ssay 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 toan image like this, just click on the image and go to advanced. Now click onmotion 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 verticalscroll to this image. So to add it, just click here and then change the direction to "Down" You can also adjust the speed ofthe effect by moving the slider, I'm going to change it to 5. Now we have added a verticalscroll effect to this image. So to check it, justscroll down this page. You can see that the image also moves. Now, if you keep scrolling down, you cansee 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 seethe image moving and it stops once it reaches the end of the section. So now you know how to addscrolling effects to your image. Next, let's see how to add scrollingeffects 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 clickmotion effects and enable scrolling effects. Here, I'm going to add a horizontalscroll effect to my text. So let's click here now, here you canadjust 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 untilthe text moves back to its place to preview the change, Just click here. Now if you scroll down, youcan see the scrolling effects on the text. You can also add a fade effect likethis 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 gotthe fade-in effect on the text And as you can see, the text isstill 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, youcan see that the fade-in effect has been added to the text. In the same way, you can add thescrolling affects to any text on your site. Next let's see how you can add animationeffects to these texts So to add effects to this textlike we did before just click on it Now go to advance, click motion effectsand enable the scrolling effects. Select the name of scroll  You want to add. I'm going toselect horizontal scroll. Like we did before you can adjust the speedof the text effects here, and you can set the positionby changing the viewport Now, let's add the fade-ineffect to this text. So let's click on transparency. As you can see, the fade-in effecthas 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 seethat we have got the effects on the text which we added Now in the same way, you canadd the effects for these texts. So now you know how to add animationeffects to your texts on your website. Next, let's see, you canadd mouse effects to this image. Once you do this, if you place the mouse onthe 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 enablemost 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 tomake 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 mouseeffects 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 addscrolling effects to your background, First, you need to fix thebackground in the section. So to fix the background, let's goto our site and go to the section where you want to add the effect Let's say you want to add thebackground effect to the section. All you have to do is just click here Now go to style, click onattachment and select fixed. Now, if you scroll the page, you cansee that the background is fixed. Now to add scrolling effects to this background, just click here. Now, scroll down like we didbefore 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 youcan see that the image size of the background has been changed. Now, like we did before you canadjust the speed and the viewport. Okay, once you've added the scaleeffect, let's see the preview. So just click here and if you scroll down, you can seethat we have got the scrolling effects for our background. In the same way, You can add scrolling effectsto the section like this. Once you're done, now to save the changes click update And your content will beupdated with the new effects. So now if you go to our site, click refresh and scroll down, you can see allthe effects that you had added. So that's it guys, this is how you can add the parallax scrolling effects to your site.