Parallax Effects While Scrolling - React
Tags: webdev, beginners, tutorial, react
Published: 2022-06-24 11:11:29

**Here we are going to have a look on three types of parallax effects->**
**1 - Normal**
**2 - Dynamic Blur**
**3 - Reverse**

In order to do that we need to install a react package.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7eiqikevsha51d2vrbi.png)

Command - `npm i react-parallax` or `yarn add react-parallax`

**Normal Parallax-**
 
Now move to **App.js**.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rh63prnuj52bcuwslv3f.png)

**Line 2** imported the **Parallax**.

**Line 3** imported the image.

**Line 8** Used the parallax and passed two parameters **strength**(we will talk about it later) and **background image.**

**Line 9, 10 and 11** passed the content to be displayed on that background.

Now move to browser you will see this.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwt6wirylyzsdwaajjll.png)
 
It is there but needs to be styled so let's add some css to it.

Move to **App.js** and add the CSS shown below.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guh860gmxfz50uedbxfc.png)
 
Move to the browser it will look some thing like this.

![Imag](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uf44duk95phhr597ukb.png)
 
Now you won't be able to scroll since we just have a single component. 
So just add another div of class **container** after the main div it will give more 100vh to scroll because in CSS we gave 100 vh to the div with class container.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry89oca4mzken65snmoc.png)
 
**Line 14 and 15** we added a new div.

Now if you scroll you will see that image don't move and next div scroll on the top of it which gives a nice effect.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utuycn40cw7dls38cij7.png)
 

> This was the normal parallax.

Now let's import two more images.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34ymulyjis1e549gwply.png)

**Line 4 and 5** imported them. 

**Blurred Parallax**

In order to make the blurred parallax we just need to make strength 300 and it needs one more value **blur**.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b10fnmd6r9eikerg62v9.png)
 
**Reverse Parallax**

In order to make the reverse parallax we just need to make strength -600.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtc24fcdw2evwv98nf7w.png)

Whole code look like this.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxvb25clgffdh3k20380.png)
![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/men7ifi9md1sqx8y5rqn.png)
 
 
Now if you move to browser it will work like this.

![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lber5yjgql7702ob1gbq.png)
 
![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kcleqx5cus51hz8eqf30.png)
 
![Image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9j0botdrkl3lhi19lgoq.png)
 
**Strength means how much the back ground image will be scrolled up while scrolling the page if 200 it will be scrolled more with less parallax effect and 800 means it will rest like the content is scrolling on the top of it.**