Bring Life to Your Website | Parallax Scrolling using React and CSS

hello and welcome to closure today we are going to implement parallax scrolling in react using hooks parallax scrolling is a great way to bring life to your website and it simply looks fantastic there even is a research showing that people think websites with parallax scrolling look more professional with that being said let's begin for this tutorial i'm going to use the small landing page i created abstract backgrounds like this one work very well with parallax scrolling and i don't want to miss that opportunity parallax is an effect that visually separates objects from the background this is achieved by scrolling them at a different speed and or in different directions parallax effect is often used in 2d platformer games like sonic and is a popular choice among web designers as well it's one of the easiest ways to bring life to a static web page and make the user experience more fun overall to implement parallax on this website i will make the background scroll slower than the foreground this can be achieved using translate y css function but more on that later before we can do that we have to know exactly how much the user has scrolled the page and we have to store this data i'm going to create a new state for that purpose this offset y variable is going to contain the number of pixels scrolled from the top of the page and the default value is 0. now we need to actually get this y-axis offset and update it every time the scroll position is changed for that we need to create an event listener for scroll event this event will fire whenever the page is scrolled and will provide us with the y-axis offset we want to initialize it as soon as the component mounts so we need to use effect hook with an empty dependency list inside of this hook i will initialize a scroll event listener on a window object and in the callback function we will set the new y-axis offset we can get it using window page y-offset and then we need to update our offset-wise state with the new value we will need to create a handle scroll function for that because that's an event listener we want to make sure to remove it if the components gets unmounted otherwise the listener will continue to be active after the component is gone resulting in memory leak we don't want that in our app so let's create a react hooks analog of component will unmount lifecycle method for that we simply need to return a function from our use effect hook and inside of this function we will call the remove event listener method and pass our handle scroll function as a second argument when the component is about to unmount this arrow function will be called and the listener will be removed please note that you have to declare your callback function in the variable or otherwise you won't be able to remove the event listener and we are almost there all we need to do now is to apply translate y function to our background image dynamically whenever the offset y style is changed the easiest way to do that in react is to pass that as an inline style using style prop now we need to transform the image and the transformation function is going to be translate y i want background to move 50 slower than the foreground meaning i want background to be 50 higher compared to where the page scroll is at our page offset and pixels is stored inside of our state so i need to translate the background to the top by 50 of that value make sure to not forget the px at the end or it won't work we now have this fancy parallax effect on our website but we are not finished yet i want to also add parallax effect to these triangles in the bottom right corner i have them stored as a separate image so we can easily do that i will just copy and paste the inline style from our background to triangle's image and i would also like triangles to move at a different speed compared to background this can be achieved by changing the multiplier inside of the translate function let's try 0.8 for example the triangles are moving faster than the background now so the higher the multiplier is the less parallaxy the element is going to be with one just being a normal scroll anything above one will scroll the object faster than the actual scroll it is also possible to pass negative value to translate why this way will make the object move in the opposite direction of our scroll and it looks very cool the website has now become much more dynamic and less boring and that's only a small part of what parallax is capable of there is plenty of room for creativity don't be afraid to add this effect to more objects move them at a different speed and experiment parallax scrolling alone is able to improve ux and make your website more fun to use overall smash the like button and subscribe to the channel if you enjoyed this video leave a comment if you have something to say the github link is in the description and as always see you in the next video

Channel: Closure: Web Dev. & More

Views: 83,479

Keywords: css parallax, parallax scrolling, css parallax effect, css parallax scrolling, css parallax tutorial, parallax, parallax effect, react js parallax scroll, parallax scroll react, react parallax scroll, react parallax scroll tutorial, react parallax tutorial, parallax scrolling effect, css parallax scrolling effect, css parallax scrolling perspective, parallax scrolling react js, parallax scrolling react, parallax effect css, parallax scrolling css, parallax scroll css, css, react

Id: Q5y6pwoE3cM

Length: 4min 12sec (252 seconds)

Published: Sun Aug 02 2020