Parallax Tutorial - Scrolling Effect using CSS and Javascript

Learn how to create a Parallax effect using CSS and Javascript. We are going to create two different types of parallax effects.

--

[galayder]

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

[gustavopacheco]

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.

[fsassiv]

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 =
window.addEventListener("scroll", function() {
let offset = window.pageYOffset;
parallax.forEach(function(prllx, i) {
console.log("Parallax " + i + ": " + prllx.offsetTop + " / Window: " + offset);
= (offset - prllx.offsetTop) * 0.7 + "px";
})
})

[lynguist]

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!

[imanidioli]

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

[IshanKesharwani]

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

[lokeshlokie]

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

[justingreen]

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

[ToboTheRibbler]

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

[kleuner]

Thank you very much! Regards from Bavaria.

[hannan]

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

[gabreyes]

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

[melosstudiosEt]

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

[lucasrsalazar]

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

[spaceoverview]

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

[ItzNea]

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

[JMSWV]

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

[yaldakarimi]

thank you! a simple and practical tutorial

[shivanichauhan]

Very well explained ! Thankyou so much.

[razaabbas]

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