Lesson Code: http://www.developphp.com/video/JavaScript/Parallax-Scroll-Effects-Tutorial-Animation-Programming
When creating parallax effects the programming goal is to make different layers move at different speeds. It is sometimes programmed according to where the user mouse moves on the screen, and sometimes it’s programmed into the scrolling of content on a web page. It is a similar concept to Disney’s Multiplane Camera where different layers will move at different speeds to give the viewer a better sense of depth. We are going to use essentially just 1 line of JavaScript code to produce a parallax scrolling effect.
Original source
49 responses to “Parallax Scroll Effect Tutorial JavaScript Animation Programming”
great tutorial! I appreciate it.
THANK YOU BRO! I have searched it but I didn't find. But in this video, I understand. Thanks again 🙂
I feell so bad when everyone says It´s easy and I try my best and never get it works, I do´nt know why, but I cant get it works, not even when I copy each line perfectly
Adam Khoury, you're the man! Excellent, patient explanations. Entertaining. And unlike other educators, you don't rush through your explanations which means even the inexperienced can keep up. Great stuff 🙂
Thanks, Adam, for a great tutorial. You're a good teach'! I see more and more websites using this effect so I wanted to learn more about it.
Good day, Adam.
I can not get this to work after I give an element a fixed position as I can't scroll the page any longer.
Giving the content layer absolute positioning is fine, but giving the body-tag or the parallax level 1 fixed positioning,
disables the scroll bar. Got any clue what might cause this?
I am using Google Chrome, but I have tried it in Mozilla Firefox as well.
Best regards.
Building a website like mmm website, pls i need it as soon as possible for a final school year project, pls create video tutorials.
excellent tutorial on parallax. wish if you could have shown how to add text box in content :(. Not able to add divs with text content in here
Thank you so much! This is damn easy, Explanation is too clear 🙂
Mr Adam Koury- I tried but I didn't get positive result. Why? tell me by email tomarow. OK
Thanks Adam killer tutorial.
A model of clarity. Thank you for taking the time to do this.
I love u Adam!!! I love the way u teach. I learned a lot from u. Thanks man.
Excellent tutorial, easy to understand.
Very good. Thanks a lot, man!
you're awsome.
Actually having implemented this in a simple html webpage on a background image, the parallax effect is not smooth at all but choppy. Perhaps this is not the most performance-friendly way?
This almost seems too easy, like we're cheating or something or doing something wrong.
Thanks it was great.
Adam, thanks for breaking it down in such an easy-to-understand format. I can't believe how simple it actually is. http://www.dansevigny.com/parallax-scrolling-is-easy/
i did the same but no effect, how u did these circles?these circles r in background img or separate img, sorrry for stupid Question but im new to javascript , plz clerify my concpt
Thank you sooo much
Thank you.
This is so helpful. Thanks a lot!!
Hats Off. Couldnt get better.
Its easy to understand and looks like its easy… But it doesn't work in my test. I already copied your text. Maybe it's an error in NetBeans? Help pls 😀
Great tutorial! That penguin at the beginning looks evil though… xD
Great video, explained very well
how did you get that picture?
You explain so clearly! Thanks for this tutorial, it helps a lot. 😀
I absolutely love you!! <3
Sir can you give a video tutorial of how to use facebook sdk login using jquery
Why are you so awesome?
Great tutorial! Thanks for the tip.
Great tutorial. Easy to follow and understand.
I'd like to know how you got circle image to follow mouse. I suspect that's another parallax layer and windows event has something to do with pointer or hover.
The BEST soundtrack.
Why did you add "false"?
lol. u r so fun, relaxed and ur tuts r amazing
Thanks men you make it very simple 🙂
Clear and easy to understand tutorial. Thank you.
will it become responsive? if not ,can you tell how to make that
man nice one! good production and videos in general
Thanks so much, first coherent parallax explanation so far, plus loved your accent (overseas right now & a bit homesick)!
Thanks. Now give me the jQuery codes.
Now i can test un peace xd
Thank you. Much appreciated.
can smooth scrolling be added to this?
So it was so "simple" to implement a parallax effect. Thank you very very much 🙂
Adam, is there any way I can have you look at my code and let me know what you think is causing it not to work? I tried to implement this into a design, after the design was completed. A client requested it later in the design.