How To Add A Parallax Scrolling To React Website

hello engineers and welcome to my channel in this video we will learn how to achieve parallax effect while scrolling in react this is a sample project i worked on earlier as you can see uh you can see the effect so first one second one and all three of this are different effects so if i go up let's go up first one is just a normal parallax second one is blur parallax as we keep scrolling down image gets blurrier third one is reverse parallax this is what we will be creating today to achieve this we will use react react parallax library from npm and images i downloaded from pixabay you can go there and download images you like or you can use images i use from my github project and link will be in the description below let's go to our terminal and create new app using npx create react app and let's name it react parallax and this should take some time so i'll resume once it's done all right now the project is ready to go so i'll just cd into react parallax folder and just say code dot so that vs code opens up right into the folder and next thing is let's just bump this up next we just need to clear a few things up so we don't really need this we don't need logo report and so i'll just delete these three files we don't need this and we need all these files so next inside index.js i'll just remove all this part and we don't need this as well and let's go to app.js we don't need the logo save it let's clear this up and let's just have hello world and just some exclamations let's go back to terminal and just run the app npm start and should take a while okay now it's ready to go and still spinning okay hello world uh pretty good let's clear up uh index.css file and let's start by having this and we will have margin of zero padding of zero and box sizing will be border box and we will have text align center so that's out of the way next let's start with app.js file here so uh along with that let let us first install the package which we need so just go head over to this link and link will be in the description below so just copy this go to terminal and i'll open new tab and just paste it right here so while it's okay just got installed so let's go back to our app.js file and here i'll start by creating so first we need to get parallax so i'll just say import from react parallax and we'll just say para we'll say parallax right here and here we i'll open up parallax and this one will have uh this needs uh two attributes so first is strength which is going to be 600 and i will play around with this strength later on and next is images so once again you can get images from pixabay or you can use images i have so first i'll go ahead and create a folder which will be images and i'll just click all these three images i have and put it inside images folder next we need to import all three images so i'll for now let's just start with by importing let's just do imp so that i can do this actually it's right here images and let's start with city first one was woman so this one and we'll say woman and save and here next attribute is bg image which is going to be name of the image we just imported so just pass in woman here and just close it and inside this we place our content so we will create first div with class of content and create next div with class of text content and here we'll just say normal parallax and just save it and if we go back to our file you can see this it's here but it just needs some css so let's go ahead and add the css which is required and we will open our app.css file and remove all this part right here and let's start by giving css to our content so this is just going to be height of 100vh and if i save and go back you can see the full image right here next we will just give css to our text content so text content is going to be dot text content and right here we will start with position of absolute next is going to be top is 50 percent left is 50 padding of 5 px on y axis and 15 px on x axis and we'll have transform this is going to be translate minus 50 and minus 50 right here next is going to be background of gray and let's have color of white and border radius of 20 pixels and i think we need font size of 50 pixels and i'll just save it and let's go back and we can see this but right now you won't be able to scroll because it's just occupying full uh full height so let's go ahead and let's just add an empty div after our parallax so that it just allows us to scroll and this div is going to be of class content and as you know content class has a 100 viewport height so we will have extra view below this view so if i scroll now we can see the effect right so if you scroll you can see the effect pretty cool this parallax effect really brings life to your projects so if you feel like your project is it does not have like any movement or something parallax is a good way to go so let's go back and try uh remaining two effects so i'll just copy this because this is it's it's really easy to use and i'll just uh because we need two more and let's import two more images so i'll just say imp and this is going to be images let's do city and just say city right here and we'll do same thing again imp images and this is going to be flight.jpg let's just name it fly and just save it and here i'll change it to city and this is going to be fly so for the second one this is our second one what we will do is second one requires two things so strength is going to be 300 we can play with this let's just do this and we'll play around and here we will pass in it blur requires two values one is min and another is max so let's do minus phi and max of 15 and just save it and here we will say blur parallax blur and you know what even this we can work on so just say minus 600 that's it that's what it requires to implement reverse parallax once you add negative sign to strength it becomes reverse parallax and here i'll just say reverse and just save it i'll go back to our chrome and i'll just refresh just hit home and so right now i'm using my arrow keys so that it's consistent scrolling and you can see the effect right now blur looks pretty cool and even reverse parallax is amazing like you can see the effect right now uh because of this buca effect it looks really amazing now uh i was saying you can play around with strength right so strength a good way to know all this stuff is probably refresh this page and let's go back to here home page and this if you scroll down it has all the documentation like how to implement in stuff so uh here like you see that strength is a prop which is a number it takes like value between i think it's from 200 to 800 but you can play around let's go ahead and try to decrease it to 300 so this is the woman image and if we go back right here and refresh and i'll just scroll down you can see like so basically lower number means lesser effect uh you can do the same thing with the blur as well so maybe you can make this minus 15 and go back again so now it's already a little blurrier as we scroll it becomes like perfectly uh so it's zero blur right now and it will become blurrier again but i i prefer like to be less on the min side so that it's you can still see the image and okay so that's it like you can always go to the documentation and play around with other stuff uh this is really a cool library and uh that's it if you guys have any questions please post them in the comment section below so that i can help you as best as i can thank you for watching

Channel: Yash Patel

Views: 23,608

Keywords: programming with yash, react parallax scroll tutorial, react js parallax scroll, parallax scroll react, react parallax scroll, react parallax tutorial, parallax scrolling effect, parallax scrolling react js, parallax scrolling react

Id: XUmq3B7Iugw

Length: 11min 22sec (682 seconds)

Published: Sat May 28 2022