How To Add A Parallax Scrolling To React Website

🚀 React 18 + TypeScript Course - 50% Discount
codewithyash.com/
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:
GitHub: bit.ly/3XLS9sg
Instagram: bit.ly/3rtx0aw
Twitter: bit.ly/3rl0NC1
📚 Material:
Parallax Package: www.npmjs.com/...
Picture Library: pixabay.com/
Project: github.com/the...
#reactparallax

[@turing7591]

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

[@yashpatel1O1]

I am glad that it helped you :)

[@directornovela7774]

Simple, straightforward. Thanks dude.

[@yashpatel1O1]

Glad it helped!

[@super-TechCctv]

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

[@yashpatel1O1]

Great job!

[@lashagiorgadze1480]

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.

[@yashpatel1O1]

Thank you 😊. I am glad you like my content.

[@shaivipatel7154]

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

[@yashpatel1O1]

Thank you 😃

[@bamboo5287]

Best video out there on Parallax Scrolling!!!

[@yashpatel1O1]

Haha 😆

[@davidcunha436]

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

[@yashpatel1O1]

Glad it helped

[@derekpetersont.8357]

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

[@yashpatel1O1]

Thank you Derek 😊

[@derekpetersont.8357]

@@yashpatel1O1 No problem Yash. Love to see more videos from your channel. Do you have a Linkedin account?

[@yashpatel1O1]

You can follow me on twitter. @zeroyashp

[@yashCoder]

​@@yashpatel1O1 I'm also Yash😂

[@mrag792]

You are awesome. Thank you!

[@yashpatel1O1]

Thank you :)

[@Viva-07]

Thank you..great video

[@yashpatel1O1]

thank you :)

[@siamaksaadatpur]

thank's great video

[@yashpatel1O1]

Glad you liked it!

[@menofsparta1760]

ssup bro,,,that was really helpfull thanx alot

[@yashpatel1O1]

I am glad that it helped you 😃

[@ArvinderSingh-qe6il]

thank you man

[@yashpatel1O1]

You're welcome!

[@shivampatel8850]

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

[@shivampatel8850]

If you can then please make a video on it

[@yashpatel1O1]

Ok Shivam. I will look into it. Thank you for watching ☺️

[@melaniebrown9633]

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

[@yashpatel1O1]

h-screen to h-fit

[@sayantanaditya7489]

Could you fix it ? Lmk how if you did

[@nostalgicnow6001]

Thanks soo much

[@yashpatel1O1]

I am glad that you liked the video :)

[@iznaur_18]

NICE 💥👍👍👍👍

[@yashpatel1O1]

Thanks 👍

[@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!

[@beingmatheka8356]

any solution?

[@sayantanaditya7489]

Facing the same issue

[@hemantsharma6829]

awesome

[@yashpatel1O1]

Thank you ☺️

[@komdiv4906]

thanks. Now i know more zero.

[@soulcity7529]

4.14

[@soulcity7529]

04:14