How To Add A Parallax Scrolling To React Website

🚀 React 18 + TypeScript Course - 50% Discount

Do you feel that your website is lacking something? Try adding Parallax Scrolling to your React website, you will see the change right away.

In this tutorial, we will go over 3 ways of creating a Parallax Scrolling Effect using JavaScript, React, and CSS.

We will make use of the library react-parallax for achieving this goal.

🌎 Connect:

📚 Material:

#reactparallax

[turing]

I always thought implementing parallax scroll will be difficult. You made it really easy.

[super-TechCctv]

I did something right for the first time in my life. Thank you for your assistance., and hard work!

[directornovela]

Simple, straightforward. Thanks dude.

[lashagiorgadze]

Your content deserves 100k subs. Would like you to see more animations content in the future using either css or tailwind. cheers mate, keep it.

[shaivipatel]

Alaways wanted to implement Parallax Scroll to my react website. Great video!

[bamboo]

Best video out there on Parallax Scrolling!!!

[derekpetersont.]

Hi Yash, I like watching your coding video. You are excellent in explaining hard-to-understand concepts and other technical problems .

[davidcunha]

Dude, . thanks a lot. This is nice. Clear as watter

[shivampatel]

I like your explanation
and can you do this using style-components a react library

[menofsparta]

ssup bro, , , that was really helpfull thanx alot

[BarouyrSarkissian]

thank you for the informative video on this npm package!

I've been working on it and while everything works great with full-screen, when I shrink it for responsiveness I am facing the following problems:
1) the image shrinks out of proportion (where i actually want it to preserve exact size but get clipped from the sides while we keep the image centered)
2) on any size LESS than full screen, it is showing a gap at the bottom of the image when the image starts shrinking, i guess solving point 1 will solve this too

I have tried the props of style/bgStyle/bgImageStyle to try and implement the backgroundSize to be 'cover' and backgroundPosition to be 'center' but nothing is working...

So please if you or anyone else can help me target these styling needs with this NPM Package props, it would be highly appreciated! Thank you in advance!

[melaniebrown]

The image gets squeezed when viewing the website on a phone, how can i fix that?