Parallax Tutorial - Scrolling Effect using CSS and Javascript 

I wish I watched this video 5 years ago.. Super simple and clearly explained. Kudos, author

First of all, Thanks, I've been looking forever for a simple tutorial like that. Who doesn't love parallax. But I noticed that that it only works to the first image. But I tried a few things and got to make it work in every image we wish the effect. Here's the code: const parallax = document.querySelectorAll(".parallax"); window.addEventListener("scroll", function() { let offset = window.pageYOffset; parallax.forEach(function(prllx, i) { console.log("Parallax " + i + ": " + prllx.offsetTop + " / Window: " + offset); prllx.style.backgroundPositionY = (offset - prllx.offsetTop) * 0.7 + "px"; }) })

This is best and most straight forward parallax tut I've ever seen

Awesome...awesome tutorial. No query, no plugins, just plain old javascript. I take/took courses on Udemy and all that, this was by far the best little tutorial I've seen in a long, long time. This right here is why I love to practice web design. Thank you.

i watched your tutorial on wordpress theme devolopement 4 times by now - you helped me so much! and now this is so simple, well explained, concise and just perfect as well. Also it is so funny how i am sitting here at my desk in germany in the morning (it is not even full daylight and there is no sound outside what so ever) and listening to all the foreign traffic sounds in the background - always makes me laugh and wonder thinking about the different worlds we are propably living in - and get connect via such an abstract thing as parallax via js. In short: Thank you very much!

I have watched lot of videos for this effect, but u made my day rock with simple and very means very less css code..... Awesome tutorial... 👌🏻👌🏻

It was so simple and I was banging my head for a simple explanation.

Learned so much in just 10min! You rock dude! Thankyou for thiss vid ❤️❤️❤️ Btw i have a question. Can i use a video instead of image in the parallax background?? Thankyouu ❤️

Great explanation. Very concise.

Thank you very much! Regards from Bavaria.

nice concise little demonstration...with an authentic little touch of some city ambience in the background. 🙂 🚗

your just simply the best.............easy and simple

Straight to the point. Great tutorial. Thank you very much.

Perfect tuto and explanations. Very simple way for this effect but not for responsive. Thx a lot man. (if you have a responsive solution I take it 😉)

Perfect Tutorial, thanks a lot!

thank you very much best tutorial out there

Very nice tutorial, the content also the presentation, well done

thank you! a simple and practical tutorial

Very well explained ! Thankyou so much.

Very nice tutorial, well done in explaining the CSS and JS ways of doing!

This is a very well explained video, thank you!!

Finally a video about this that's easy to understand and with short code, thankyou!

Just perfect. Love it

Thanks God. Thanks to you all guys there

does anybody know how to add text below the "DIV 1" section withouot breaking the parallax effect? i tried insert text but the effect breaks when it is out of the tag and throws all the other out of order. when i put the tag inside the div the text appears to the side of the text and not below even when i try to break it with

thnks man ...what a nice explanation

Great, easy to grasp. Keep it up

Best explanation

Are there any browser compatibility issues using this method as compared to using Jquery or other libraries?? Otherwise, thanks for the awesome tutorial loved it

Awesome! Made my webpage look so much better. Could anyone help me with just one thing? Is there a way to disable this specific code for mobile devices?

thank you for the great video, very easy to understand and follow as well!

OMG!!! Thanks so much! I watched other videos where it didn't work, but your method worked!!! Thanks very much!!

Nice tutorial

great tutorial :)

Great teacher❤️❤️💓💓

Awesome, thank you very much for this tutorial!

Thank you my friend! Easy as pie, great tutorial!

Your work is wow❤️

Very simple and helpful, but how do you make it less jittery if you're using a large background image or have a lot of content?

Thank you very much ! CU

very very helpful, wish your success

How many Parallax effects on one page, in particular the effect of the content gliding over set images?

please kindly using the more video background in parallex, provide the tutorial

thanks man.

Great video thank you man

Thanks

I LOVE YOU!!!!!! Thanks for this. I have liked and subscribed already...

I've tried using this for my project using your div 1 and 2 only. However, the image seems to immediately zoom in when scrolled and gets stuck at that area unless the page has beem refreshed. Only then, will it display the full image. Would you happen to know what went wrong with my coding?

well done tutorial!

index.html---------------- Div 1 Div 2 Div 3 Div 4 CSS------------- * { border: 0; padding: 0; margin: 0; } div { display: flex; align-items: center; justify-content: center; font-weight: bold; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; width: 100%; height: 100vh; } h1 { font-size: 60px; color: black; padding: 8px 24px; border-radius: 16px; } div:nth-child(1) { background-image: url(../images/1.jpg); background-size: cover; } div:nth-child(2) { background: brown; } div:nth-child(3) { height: 400px; background-image: url(../images/4.jpg); background-size: cover; background-attachment: fixed; } div:nth-child(4) { background: aquamarine; } main.js--------------------------- const parallax=document.getElementById("parallax"); window.addEventListener("scroll",function(){ let offset = window.pageYOffset; parallax.style.backgroundPositionY=offset * 0.7 + "px"; })

good tutorial good tutorial good tutorial

very cool bro

Thanks, very helpful!

How do i make this work on only specific sections ( section ID="") etc. This tutorial is only for 4 specific DIVs, which isn't as convenient when working with multiple sections that are prebuilt. When I start this tutorial and get to the ( div:nth-child(1) ) , this changes every div background in my document.

You explain that so well~~

This does not work when a background image is positioned center.

Still haw questions, with this function I used to make new function for each Id, because getElementByClass returns array, so how to make it for class ? And strange thing , I have exact same code and my parallax moves in backward direction so I added -before multiplier ? but still have unanswered questions.

How could you also create the same parallax effect for the second picture with making the picture repeat when you scroll down?

Cool implement! 📲

Thanks for video but you can simplify this thing by just background-fixed without any javascript. Every div can work as expected

Thank you 😊

thank you

I did the exact same thing and structure but the parallax for the first div item just doesn't work :(

Thanks for video guys!

did the same as in the tutorial but I got an error of 'const'. It says: "expected an identifier and instead saw 'const" and "Error: Parsing error: The keyword 'const' is reserved" I tried to put it online and it works despite the error but will the error have an influence on my website after a certain amount of time? Can you please help me remove that error? My code in the 'js-file': const parallax = document.getElementById("frontpage"); window.addEventListener("scroll",function() { let offset=window.pageYOffset; parallax.style.backgroundPositionY = offset * 0.7 + "px"; })

very helpful video thanks a lot>>> :)

Thank a lot

im searching for this for like 2 hours, thankyou bro

I had to use nth of type, not nth child, to get it to assign the right image or colour to the right div, not sure why... I copied exactly, it always treated div 1 as the third child. My understanding of it maybe poor, like why is the first div the Parent? I could beleive it treats maybe head or body as the parent, but that clearly didn't happen for the tut and I didn't see anyone else report it

Anyone having issues with a choopy scrollling effect?

3 years of university and now I discover how simple this is... I feel dumb

How do you get this to work for 2 image on the same page?

Thank you so much for sharing this amazing tutorial :) I was wondering how can I also make the background image not to repeat itself while scrolling? I once tried to place the parallax div in the middle of the page, however, when I apply the js to it, the background image always repeats itself, and when I set background-repeat: no-repeat in the CSS file. The background then disappears :(

I have a non related question... How are your code suggestions so fast? For mine I have to wait a bit (sometimes more) before they show up 😱

Great

const parallax = document.getElementById("banner"); window.addEventListener("scroll", function () { let offset = window.pageYOffset; parallax.style.backgroundPositionY = offset * 0.7 + "px"; })

the parallax doesn't work. i've copied the code letter by letter aside from the font and the image, and everything else works except for the top parallax. for reference i use chrome, but it doesn't work on explorer either.

Liked! Simple and easy! Thanks!

Thanks1

how do I do it for 2 or more elements on the page?

nice

My background always jumps right at the beginning when I start scrolling and then works fine...any suggestions how to get rid of that jump at the beginning?

If we put parallax effect in middle of a page its not working properly pls help

I keep getting "Cannot set property 'backgroundPositionY' of undefined" whenever I try the parallax. What's going on?

great

how to do this in react.js?

assuming this doesn't work on ipad

o man, perfect for me:)

Спасибо)

Thnx...but he part did not work bro

why no source code ;(

Thanks for tutorial. However you should be more consistent- You are using both single and double quotes for strings etc. Parallax although very easy to implement can ruin website’s performance

util gracias

this code just not runing correctly .

Now div display: flex does not work anymore. You have to use flex instead of flex, inline-flex.

Js

Best!!!

thanks

Thank you! I am now a huge fan! So clear!!!!!!!!!!!😇😇😇😇😇😇😇😇

Crystal clear explanation. Thanks!