Javascript Parallax Effect Explained

PART 2 HERE

We go through some raw ins and outs of doing the famed parallax effect. It seems to be a big deal lately.

This is by NO means the only way to do this, but this is the one I like. I use webkit transform instead of margin-top because of performance.

To make this work in all browsers, you need to use all the css3 transforms, and the paul irish request animation polyfill, as well as make a fallback from the transforms to margin-top.

[bennettwaisbren]

LOOOL I was scratching my head so hard when you accidentally added those straggling classes sitting outside of the quotes.

[luvitluvitbaby]

YOU ARE A LIFESAVER!!!! I am junior developer and I have been pulling my hair out trying to get this effect!!! It took awhile, but I finally got it! You are Godsend!!!!

[Sloth]

Welcome back Sean! Missed your videos.

[trzown]

Dang dude I don't even f with development stuff anymore but i ended up watching because you speak so well and its fun to listen! Good job!

[MrRossahlvin]

Hey there, I am very new to this, and know the basics of the basic. I do grasp the general concept of it and this is by far the best video I have found. But If I am wanting to do this similar effect for my own portfolio website. I would have a different src under script correct? @ 1:28. Sorry for the nooby question but I do like to learn a lot of how this stuff works. Helps my design. Thanks for the video though it so far is more informative then blogs and others alike

[LilLaura]

Hi there! I have no errors in the console left and it still doesnt work. Any other reasons why it might not work that is not code related?? :) Questions aside, liked the explanations in this tutorial a lot!! Thanks.

[rajeshnobojja]

 
hello, i liked this video pretty much
 i am making  website using parallax, in that an object (raw diamond) is falling down and breaking into pieces(pure diamond) using parallax scroll the whole thing should work.
so i just want to know the possible way to create and also how much images do i required

[wojna]

Could you use something else than webkit translate 3d? Maybe changing position of each image givs the same effect?

[ulamlangbinary]

Last question sir!! How did you separate those sample text within each picture? All I can do is they overlap each other >.<

[Stacey-gipu]

Is there at least a place we can get the images used so we can follow the tutorial correctly? 

[optikalefx]

Yea you can, but using ANYTHING except transforms will cause the browser to do a re-render of the screen every frame, which will be slow. Transforms can be done in the GPU and thus be fast. I'm making a part 2 to explain that soon.

[sdhpCH]

I love the effect and the performance, but please help us out with bringing that into the other major browsers... i tried a lot of things now, but FF and IE does not work with "translate"...

[gkiokan]

Thats really great, thats imba thats awsome. Good job dude, this inspirates me for some new actions also. How about getting 3d Animation like swipe left / right on scroll while scrolling. Thats the beginning of a new Dimension :) 

[ghousepasha]

Thanks for the great video!
But I am unable to see the text which i have added to display on top of image. Thanks

[optikalefx]

Mark Enriquez You had a line break in your div.style part. Once that is fixed then you don't have an error anymore. Try this on a page by itself, not in JS fiddle.

[MiguelBillietMusic]

on 1:15 i can't see the adress of the src in the script. can i get it?

[tubetlamber]

Well done. This puts the other parallax tutorials to shame. :)

[theinterworks]

I can not tell you how much this helped me.  Totally brought my website to life!  Thank you so much for taking the time to actually step through the code, and for leaving in the mess ups.  The real world involves snags, not all code is going to work perfectly the first time, and this encouraged me to keep at it, which exponentially paid off. 

[atbaojq]

cool tutorial. it runs perfectly in my chrome36, but in FF31 and IE11, it looks not working.
are there some ways to make it run in FF and IE11? Thanks

[Botchy]

is there anywhere that i can get the images used in this tutorial? A quick reply would be awesome, Thanks!