How To Make a Parallax Scrolling Website In React

Learn how to build a Parallax Scrolling Website in React in this beginner tutorial. This tutorial uses the react-scroll-parallax package (link listed below). I apologize in advance for the sound quality.

Timeline:
0:00 What We are Building
0:46 Create New React App
1:52 Clean Up Files and Set Structure
3:06 Install React-Scroll-Parallax Package
4:00 Grab Images From Unsplash
5:15 Start Creating our Components
8:10 CSS Styling

ZeroTo Mastery:

Coding Challenges!

Link to React-Scroll-Parallax package

GitHub Repository

Images Used in This Project

☕ Buy me a Coffee ☕

Instagram 💪

🔥 My Coding Equipment 🔥

[magdalena]

Cannot emphasize how brilliant this video was. Simple, easy and I learnt while I followed.

[mahangk]

most useful video about parallax scrolling, short and to the point. thank you.

[quanghuynguyen]

I don't know why i just found your channel now, but it's amazing
I learned a lot here, thank you so much

[sean]

Loved the video dude! its nice when people keep it short and simple and to the point.

[joshuabiongPH]

New subscriber here with the bell On! you're the man mate!

[asmondgold]

I've learned more in this 15 minute video about react than I have in videos that are 4 hours long.

[danialez]

Thank you for your effort I am just at the first video but I learned alot
Keep going man❤

[herbertgandia]

Thanks for the awesome video. Question. You ever had an issues where when you scroll the images become jittery?

[m_piyush]

I hit the like button it git 1k likes 🎉

[obinnailoanya]

Hello Sir i came back to this video just to look at you without beards, it still cracks me up. i dont know if you have noticed but i am your beards troll, lol🤪🤪🤪🤪

[mtsurov]

Can you cover use of If/Else in react ?
Its such a muddy topic of how its implemented.

[showcaserv]

Can you make a video about animation on scroll? I’d love to watch it because I want to do it for my website but don’t know how to.

[fulviodimaio]

hello guys, is anyone experiencing a shaking problem while scrolling? I am using image with a good resolution, what could it be? <Parallax className='image' blur={0} bgImage={nuovaImmagine} strength={800}
<div className='content'>
<span primavera estate</span>
</div>
</Parallax>

[Shrimant-ubul]

Help me sir, I've followed the same steps but the code isn't working

[neelnarwadkar]

I followed this tutorial, but my scroll isn't working.

[Yankzy]

Since the dawn of humanity every dev start their programmes with "Hello World", what's wrong with you? 🤣🤣

[addwaitakumari]

can you please provide the source code?

[lonelomessi]

literal hero🦸🦸‍♂🦸‍♀ thank you so much!!!