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

Does your website look boring and you don't know why? Consider Parallax Scrolling as an option! Only 5 minutes and some React and CSS and that's it.

In this tutorial, you will learn how to create a Parallax effect using modern Javascript, React Hooks, and SCSS. It sounds much scarier than it actually is!

-- Websites with Parallax Scroll from this video --

-- Attribution --

#CSSTricks #ParallaxEffect #ParallaxScroll

[highroller]

Hands down one of the best tutorials I'ver seen for Parallax

[minemastersclub]

Thanks for the great tutorial! It was very clear and minimalistic which makes it easy to follow. Kinda got some Fireship vibes, we need more quality programming tutorial channels. Keep up the good work and your channel will blow up.

[spondoolie]

Hours of searching paid off big time! This video is pure gold my brutha... just shared it in Discord

[khairislama]

the best way to present a tutorial, it saves you a lot of time. Thank you so much

[chriskennedy]

Thanks for this. It's exactly what I want, a simple React way to do parallax without libraries

[ReadTheCommentFirst]

This is a great tutorial that helped me understand how parallax works.

Only issue with it is that translation of elements will continue even when they are off-screen.

I think a better approach might be to only apply the styles if the element is in the viewport (using intersection observer maybe) .

You could also use Math.min() to remedy it a bit. This line for example would stop translating after 300px translation has occurred.
transform: * 0.8, 300)}px, 0px, 0px).

[MrChubib]

underrated channel! hope your channel grows

[alebuda]

omg u make it feels so easy!! i was using locomotive for this kind of parallax effect, but was not clear for me...this is more intuitive! thanks a lot

[ThandaTaco]

I thought you have 536k subs because of the quality of the video .Great work

[dinmukhammedpernekhan]

This is exactly what i was looking for. BIG W man, thanks a lot

[muhammadzaakirmungrue]

Thanks, this video is the reason why I feel like cheating when I use react-spring to implement animations.

[ogulcanesen]

That is a great tutorial. Why don't you record anymore? I like this very much!

[ayushman_sinhaa]

This is one of the greatest tutorial I've ever seen. You explain everything so well that Even a newbie can understand everything....

[viktrix]

Awesome explanation, simple and straight to the point.

[faridoudray]

Thanks for the video,
You can use onScroll instead of eventListener to handle scrolling

[shuaibuusman]

I did exactly that but the animation is so jaggy and laggy... Not smooth at all

[RahulSharma-oxse]

That was great. You are awesome! Keep it up

[GajderStudio]

Hi i did the same thing as you but used more layers. I don't get this nice smooth effect but disgusting choppy/lagging effect. Please help me

[candle-likeghost]

Now my client need to scroll up so he can reach the top of the page

[Blue-kvpj]

Nice vid, but how to do side scrolling>?