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"; }) })

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.

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

Perfect Tutorial, thanks a lot!

Crystal clear explanation. Thanks!

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

Liked! Simple and easy! Thanks!

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

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

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

Great explanation. Very concise.

Awesome, thank you very much for this tutorial!

thank you! a simple and practical tutorial

Thank you very much! Regards from Bavaria.

Just perfect. Love it

Thanks for video guys!

Very well explained ! Thankyou so much.

Great, easy to grasp. Keep it up

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 ❤️

thank you very much best tutorial out there

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 😉)

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

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

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

great tutorial :)

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

Thanks, very helpful!

awesome tutorial!

Great video thank you man

You explain that so well~~

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

Your work is wow❤️

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

thnks man ...what a nice explanation

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

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

Thanks God. Thanks to you all guys there

well done tutorial!

Thank you very much ! CU

Nice tutorial

Cool implement! 📲

Great teacher❤️❤️💓💓

thanks man.

Thank you 😊

very helpful video thanks a lot>>> :)

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

very cool bro

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 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.

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 a lot

Thanks

very very helpful, wish your success

thank you

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?

thanks

good tutorial good tutorial good tutorial

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?

im searching for this for like 2 hours, thankyou bro

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"; })

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

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

Спасибо)

Great

o man, perfect for me:)

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 did the exact same thing and structure but the parallax for the first div item just doesn't work :(

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

nice

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

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

great

Thanks1

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

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

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?

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 😱

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"; })

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

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

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.

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

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

how to do this in react.js?

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

util gracias

Anyone having issues with a choopy scrollling effect?

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

assuming this doesn't work on ipad

Thnx...but he part did not work bro

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

why no source code ;(

Js

this code just not runing correctly .

Best!!!