Stunning Pure CSS Parallax Scrolling | 5 Minutes Tutorial

Pure CSS parallax effect tutorial to make elements scroll with different speed. You'll find a detailed explanation from scratch to a cool parallax scrolling website. All in 5 minutes!

Follow us on

[kalyankattamuri]

That little piece of Blender 3D model you created to explain Parallax speaks volumes!

[ryandsouza]

Your voice is perfect for video tutorials, buddy. Great explanation. Keep rocking.

[jonathonkiner]

Awesome! This is like black belt hidden technique

[stoovercoding]

thats what i was searching for. thank you.

[nelrenaudin]

thank you for sharing this ! it's working perfectly

[jimallen]

Exactly what I was looking for.. Thank you for making it so simple.

[jjjjoop]

thanks for creating such a 3D model! That helps a lot!

[heroicmuffin]

Thanks. Well explained with no wasted time.

[terreljonesjr.]

SO EASY added in 30 seconds. thank you my friend! also works with seperate img or video as background

[rafaelcalderon]

Just amazing, in 4 frecking minutes you explain parallax for dummies (like me)...

[mizanchoudhury]

did not work for me? even with your code. im using HTML5 does that make a difference?

[jenninexus]

Thanks for the tutorial! Exactly what I was wondering how to do and in only 5 mins :-D

[SAnCtuSsBalTuss]

Works beautifully... Thank you for this!

[courtneyd]

On chrome, the regular-wrapper goes behind the parallax. And yes, I used the exact code and made sure the z-indexes were correct. It doesn't work at all on Firefox or Safari. I even added -webkit prefix. I am a bit bummed because this tutorial seemed like a nice, simple, clean parallax affect. Any help would be appreciated.

[ionutmadalinionescu]

Thanks for the tutorial! One question I have: Let's say I repeat two times the wrappers but if I want regular wrapper to have less height than 100vh, the background in the parallax wrapper repeats itself and looks bad. How can I fix this? Thank you!

[jordynmuldrow]

Do you happen to have a beginners CSS tutorial ? Thanks

[KARPINxd]

How do you make it to change the speed of the parallax ?? (if you want to do 3 elements rather than 2)

[danielkim]

how do you add more slides? i dont know because the website is down at the moment

[lorismuller]

I need help: My Background Images are not there. What can I make????

[ahmedelmansi]

i only love you guys really big thank for your efforts