Stunning Pure CSS Parallax Scrolling | 5 Minutes Tutorial

[@RedStapler_channel]

Parallax Source code: redstapler.co/css-parallax-scrolling-effect/ Snow Background Tutorial: kzbin.info/www/bejne/bpbccqJ4d9qWfs0

[@kalyankattamuri4941]

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

[@alimertc]

any excuse for using blender goes ;)

[@pranoychow3808]

that's what I thought too. As soon as I saw that, I understood the concept.

[@ryandsouza7100]

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

[@jenninexus]

I agree, very relaxing and precise.

[@jonathonkiner7415]

Awesome! This is like black belt hidden technique

[@nelrenaudin9658]

thank you for sharing this ! it's working perfectly

[@jjjjoop]

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

[@jimallen6197]

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

[@rafaelcalderon6658]

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

[@stoovercoding828]

thats what i was searching for. thank you.

[@scottisitt]

Really cool! Thanks for sharing!

[@syntheticperson]

Very helpful. Thanks!

[@heroicmuffin9972]

Thanks. Well explained with no wasted time.

[@terreljonesjr.3277]

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

[@mizanchoudhury9536]

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

[@anasasimi]

u r great bro ty from my heart

[@SAnCtuSsBalTuss]

Works beautifully... Thank you for this!

[@vincentromine3949]

Got yourself a subscriber!

[@lorismuller2574]

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

[@courtneyd9835]

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.

[@danielkim7697]

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

[@KARPINxd]

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

[@ionutmadalinionescu7065]

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!

[@jenninexus]

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

[@aimankandakji9840]

How can i add a div with sticky position over the parallax and reg wrappers?

[@jordynmuldrow3885]

Do you happen to have a beginners CSS tutorial ? Thanks

[@evernolasco19]

yea it didn't work for me

[@stephendumore4363]

It works perfectly on Firefox but on Chrome and Opera the scrolling is backwards. *Edit: It was because I had "background-position: fixed;" applied to the pseudo element. Not sure why it caused that issue.

[@ferosemalik4403]

Works perfectly! But doesn't seem to work on iOS. Can anyone help?

[@yogafinder1]

Please increase text size on your code. Great video.

[@nishanmajumder7059]

Sir,plz Make video of CSS A to Z

[@trippasnippa119]

im trying to make a personal resume website this is hard considering the fact i dont know any css and im somewhat familiar with the simple html gl you guys hope you found your solutions

[@ahmedelmansi6497]

i only love you guys really big thank for your efforts

[@mickeberg2123]

Thanks! Great tutorial!

[@natew4724]

Video starts at 0:55

[@guidomartinez5337]

Hello, I really liked the parallax but when I try to place elements with the fixed property they remain static, some solution?

[@tiaan_va]

Guido Martinez ummm...probably because you are not supposed to use fixed on anything. Position absolute, not fixed, open your eyes

[@hortusdeescapismo]

the one above me probably never heard about burger menu

[@nguyenthanhcong3446]

thanks u

[@awaisarshad5464]

Which software you are using at the start of video?

[@Yassir.A.P.]

It's Blender, a free 3D software www.blender.org

[@AdrianCBlack]

this is not working at all ... the 2nd content div goes below the 1st one. This is using the code from your blog

[@beerinho]

You need to make sure you change the z-index of the second div

[@TH3BADRO]

Awesome!

[@leoxu7826]

BIG BRAIN

[@rijwanhossain8502]

increase the font size hard to focus. BTW, the explanation is too good

[@marcinkoralewski3520]

Solution is good but not so universal. should notice that this approch with redefine html and body tag with overflow property makes specific setting and behivor to all elems. Of course you can use new container insteed body but then you get second scroll which of course you can be hide but it not working well during scolling. When all is inside container works well.

[@BlueIceAce2015]

Great tutorial, but for so much code for such a simple effect, I would dig into one of the dime a dozen parallax libraries out there.

[@devajohnson4366]

Nice video bro 👍👌

[@shays4042]

would be nice when you are teaching a tutorial keep it as simple as possible with only working with one background image and one forward image. Then after that show a more complicated one with more elements and divs.