Javascript Parallax Effect Explained

[@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!!!! THANKYOU!!!!! 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!!!!

[@6Sloth9]

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!

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

[@optikalefx]

coming soon!

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

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

[@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

[@tubetlamber]

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

[@MiguelBillietMusic]

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

[@optikalefx]

I don't make the code available. The goal is that you learn and type it yourself. Just the mere act of typing it out will do wonders for you understanding how it works.

[@abdullahislam]

Man! Its been a long time!

[@ajgubi19]

absolutely awesome! Hey! Paul Irish fan here too! :D

[@Hiyop]

sadly i had to stop @ 1:14 because of jquery. You should mention this in either the title or description. This will save real Javascript programmers at least 1:14 of their life-time.

[@optikalefx]

You should have kept watching to part two. jQuery was used to show off how inefficient it's loops are. In part 2 we use native for loops to show how to optimize these kinds of things. And to your hearts desire in part 2 you can use querySelectorAll instead of .find

[@Hiyop]

optikalefx thanks for quick reply. i'll have a look soon.

[@john-michaelsmith]

I didn't do something right, but I don't know where. I've been on this video for over an hour trying to figure it out.. But so far, this is the best tutorial I've seen. I just messed up somewhere.

[@optikalefx]

Whats you're debug console have to say about all this?

[@john-michaelsmith]

optikalefx I'm just using notepad++, so there is no built in debug.

[@optikalefx]

John-Michael Smith I mean the chrome dev tools. When you run it in the browser, open the console and see what it tells you

[@john-michaelsmith]

optikalefx Under errors it says, "uncaught ReferenceError: $div is not defined"

[@optikalefx]

John-Michael Smith BOOM there's your problem. You're trying to use the variable $div without every have set it.

[@areefahmed8141]

You shud get paid for all your tutorials man...they are great...until then subscribing ;)

[@wojna1234]

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

[@ericadreisbach9754]

You are awesome. This is awesome. Thank you, brother.

[@optikalefx]

Pleasure is all mine.

[@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 :)

[@optikalefx]

Thanks. You mean like as the user is scrolling you want the parallax to move in an X direction?

[@gkiokan]

Not really, i thought more like opening a window Effekt. Means it flips left / right or something like this. Hard to explain. But well with the Differents calulation we can use any effekts later on.

[@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"...

[@LilLaura25]

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.

[@optikalefx]

I actually love the windows 8 style. Call me a sinner.

[@areefahmed8141]

SUPERB !!! this is exactly what I was looking for !!! thanks a bunch mate!! and good job! (Y) :D

[@kneckel]

really good job, I understood everything... and even made one myself... nice...!

[@ipraveen021]

thanks a lot and I saw the second video too, it really had good info on efficiency and I learned a lot!

[@Stacey-gi8pu]

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

[@ghousepasha3297]

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

[@rajeshnobojja4007]

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

[@ulamlangbinary7694]

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

[@lindam9848]

it works, finally. Great Thanks

[@Botchy1997]

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

[@optikalefx]

Here's 2 of em cl.ly/0S3Q1n0p3H2z

[@kitboschert7447]

optikalefx thanks

[@pmuruaga]

Uncaught ReferenceError: JQuery is not defined. Why am I getting this message on the console in Chrome? If I use this: "jQuery(document).ready(function($) {" instead of "(function($){". Seems better, but not sure if is correct to change it.

[@optikalefx]

you can change it. You probably have the parenthesis wrong for the other way. No biggie. It's more of a super advanced JS thing to do it the other way. It protects your code from interfering with lots of 3rd party code

[@thisguythatguy123]

my background images dont seem to be stacking on top of each other. Only shows the first div. Anybody know why or what im doing wrong?

[@optikalefx]

Sounds like a positioning CSS problem. If your divs are straight DIVs then they will stack.

[@linkpark182]

optikalefx, thanks for the tutorial, i really like the way that explains and I'm will subscribe

[@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

[@milibrodeoro]

Thank you for a great video. The onlly thing I didn't manage was the requestAnimationFrame. so I uses the setInterval(function () { render(); }, 1000 / 60) It worked fine. /A

[@pshermantech]

Why are you using $ for some variables?

[@wojna1234]

You are right. I see it now. Thanks

[@kbkrisa]

Hey, really nice tutorial, although it doesn't work for me :/ JavaScript Console shows no error, and there is no syntax error in the code either. I tried to write this code 3 times or more already, i also tried your part 2 tutorial, maybe with that it'd work but it won't and I just don't know what the problem could be. Can you help me somehow, it's really frustrating? Thanks

[@optikalefx]

Send me your code [e-mail]

[@sarinabodker8543]

I want to change the height of the pictures, so that each picture fills the screen when scrolling. But every time I get it right, it starts trembling (shaking) alot! How do I fix this problem? And what makes it shake?

[@optikalefx]

That would be the Harlem Shake. It's back.

[@optikalefx]

Is your code up online that I can see? Or you can send me the files to take a look.

[@sarinabodker8543]

I just put it online :) www.sarinabodker.dk Is the Harlem Shake normal?

[@optikalefx]

Sarina Bodker Try changing Math.round to Math.floor

[@sarinabodker8543]

optikalefx It is still the same :(

[@HaeriStudios]

Very nice tutorial. Could you post the code somewhere so that we can follow along easier? Would be great! PS: Yesterday I made a simple timed image-slider... Now I am embarrassed, because your parallax page runs faster than my shitty slider :/

[@optikalefx]

Haha thanks! All of the code should be there in the video, if I just gave you the code then you wouldn't need to learn it. :) Best of luck!

[@matteofadi3923]

Fantastic! i have only one problem ... chrome dev tools don't give me any error... but i can't see java working ... but i've this problem since i've start to write down your code . For example, the count test doesn't work for me ... do you know why ? Thanks man ... and thanks twice for answering the question of users ! :D

[@optikalefx]

Put your code up somewhere so i can take a look

[@matteofadi3923]

optikalefx here it is ! pastebin.com/zSsHQzV2

[@matteofadi3923]

Problem found. for(i=0,len=$divs.lenght;i

[@optikalefx]

Matteo Fadi Woo!!

[@OtepArc]

also wrong spelling of length typing error you type "lenght"

[@sorabhanand3107]

what drawing software is that?

[@optikalefx]

That's balsamiq mockups

[@sorabhanand3107]

thanks :) I like ur tutorials bro :)

[@ulamlangbinary7694]

can i make this in Notepad? I did every step.. but still no window :( the picture doesnt move.

[@jethroabarquez2915]

is there any way that this parallax works on firefox? it works on chrome but not in firefox please help me

[@optikalefx]

Probably yes, but I'll have to investigate what firefox isn't supporting. Ill let you know when I can do that

[@jethroabarquez2915]

optikalefx sir do you have any updates about firefox?

[@optikalefx]

jethro abarquez not yet! Sorry guys, just super busy :/

[@pardeepshergill17]

Can i get the code of this example ?

[@optikalefx]

I normally don't give out the code, because then you have the option to just copy instead of actually learn it. Try it yourself, if you can't figure it out, ask some questions.

[@pardeepshergill17]

i have implement the code. But am not able to see the effects like your page was had .

[@optikalefx]

Pardeep Shergill Sounds like you have some errors. Have you checked the Chrome Console or Firebug to see what errors you have?

[@pardeepshergill17]

optikalefx Got following errors Uncaught TypeError: Cannot read property 'parentNode' of undefined index.html:71 render index.html:71 loop index.html:82 (anonymous function) index.html:83 (anonymous function)

[@optikalefx]

Pardeep Shergill Well there you go. You're trying to get "parentNode" of an element that doesn't exist. Start by looking at line 71 and find parentNode. Then look at what your calling it on and see why it doesn't exist.

[@optikalefx]

amen!

[@Isuimi]

Hi! Your explanation helped me a lot. (Thank you!) I'd like to ask if there is a way to control the speed when I'm scrolling with the mouse, to make the movement of the images take a little bit longer to take the desired position... I don't know if I'm talking nonsense, the thing is that I saw this page: www.loisjeans.com/web2012/en and the images move not so abruptly with each mouse wheel scroll. (I'm sorry if I'm asking too much or if the explanation is too complicated, is just that this tutorial was really clear... so thank you!)

[@optikalefx]

So in the part where it says Calculate the amount to scroll, you can adjust that by some multiplier to speed up or slow down the scroll. Try playing with a .2 or .8 multiplier to see what happens.

[@mrastrogastro]

Try to combine it with greensock.js, it gives just great results! :) Check this! www.websnap.cl/samples/parallax/

[@MarshalJose1]

Thank you so much

[@richallan480]

Thank you..

[@darkmarv95]

Really good tutorial! My script isn't working though. Console says: TypeError: thingBeingScrolled is null I don't really know what I should do now

[@optikalefx]

Try changing thingBeingScrolled = document.body

[@MrRossahlvin]

Hey there again: So the divs seem to in place fine but my source images aren't showing up. I am trying to link via a folder on desktop not a url. Does that matter? thanks again here is my coed thus far. "

[@areefahmed8141]

hey i got the codes down ..but the parallax effect is not working for me ...and when I check it with the console it does not show any problems... can you please take a look at my code parallax tryout body { margin:0; padding:0; } ul { margin:0; padding:0; } ul li { list-style:none; overflow:hidden; hight:600px; position:relative; } .parallax-background { height: 700px; } .flower { background-image:url(Images/Emergency.jpg); background-position:50% 66%; } .lens { background-image:url(Images/Police.jpeg); background-position:86% 50%; } .beach { background-image:url(Images/Fire.jpg); background-position:35% 66%; } .wolf { background-image:url(Images/Ambulance.jpg); background-position: 20% 23% } ul li .subcontent { position:absolute; top:100px; left:100px; color:white; font-family:Impact; } h1 { font-size:100px; margin-bottom:0px; } h2 { font-size:60px; margin-top:0px; } Sample Text Hey there Sample Text Hey there Sample Text Hey there Sample Text Hey there (function($) { var $container = $(".parallax"); var $divs = $container.find("div.parallax-background"); var thingBeingScrolled = document.body; var liHeight = $divs.eq(0).closest("li").height(); var diffHeight= $divs.eq(0).height() - liHeight; var i,len,div,li,offset,scroll,top; var render = function() { // thing were scrolling top = thingBeingScrolled.scrollTop; //loop through divs for(i=0,len=$divs.length;i

[@areefahmed8141]

can you please check my code and tell me where is it wrong ? ...will be a great help

[@gravics]

That's very cool.

[@ezay122]

Is you script open source ???

[@optikalefx]

This isn't a script or a plugin. It's a training video on how to do this kind of thing. It's not meant to be 'dropped in'

[@ezay122]

Yes i know. Great tutorial.

[@ezay122]

optikalefx one question I have yet, where is the error??? body{ margin:0; padding:0; } ul{ margin:0; padding:0; } ul li{ list-style:none; overflow:hidden; height:600px; } .prallax-background{ height:700px; } .bild1{ background-image:url("test11.png"); } .bild2{ background-image:url('test11.png'); } .bild3{ background-image:url("test11.png"); }

[@ezay122]

ok I fix it :)

[@eliab2429]

Ayuda, me muestra este error en la consola, en Chrome, Mozilla en todos los navegadores. Failed to load resource: net::ERR_FILE_NOT_FOUND file://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js Uncaught SyntaxError: Unexpected token ILLEGAL

[@optikalefx]

Hola! use ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js instead

[@alexgraph799]

Hi everything is cool just that doesn't work for me:( can you send the project files, JS, CSS,IMG and index.html files thanx

[@optikalefx]

doesn't sound cool to me, what errors do you get in console? Did you add some logging to see how far the code is getting vs not getting?

[@alexgraph799]

optikalefx I am trying to create my page without any template... i foloved your tutoriel but at the end thats shows only 4 images no annimation... i am a begginer at this thing... i did it in Dw and in chrome i didnt get errors only one by inspect elements, but dond know what... i did a index page and a img folder, i recopied page styles to a new doc style.css in a new folder css thats all i did after that i create a js folder ...thats all ... and still see only 4 images no animation

[@optikalefx]

alex Graph zip up your project and send it over to me [e-mail]

[@alexgraph799]

ok will do it ... iam trying from 0

[@aleksejspridannikovs8722]

optikalefx i have sand you a mail... from [e-mail]

[@timothytong9169]

optikalefx I don't know why but I just keep getting this error "Cannot Read Property "scrollTop" of null?? I compared everything to your code and the only difference is one of the variable names.. Please help me out? Many thanks! pastebin.com/NRhJLUNj

[@timothytong9169]

Oh I found the problem! I was supposed to put the entire snippet AFTER the html because the DOM reads everything in sequence!!

[@ulamlangbinary7694]

Nevermind Fixed it XD

[@diegocastro4594]

Didn't work X_x but i think i probablly did something wrong, i did'nt write de code down the body part but in another .js sheet, i'm not so advanced on this so i think i wrotte something were i shouldn't have X_x

[@optikalefx]

drunk !== high

[@MiguelBillietMusic]

i dont have the effect, and also no error in the console

[@optikalefx]

Time to go back and review the code. You can send it my way if you want me to look at it.

[@MiguelBillietMusic]

optikalefx sended my code to your email. dont know how to send a message to each other since i have google + -_-

[@optikalefx]

Thanks for sending your code. You had 2 problems. 1) you wrote this "$divs.eq(0).height" which doesn't work. Height is a function, not a property, you need height(); 2nd) you never defined the variable "top" inside the render loop. Once those are both added I've got your code working.

[@MiguelBillietMusic]

optikalefx Thanks it worked :) Subscribed.

[@yousram8890]

Hello~~! The video was amazing and your explanation was pretty easy but I can't seem to make the effect work for me and I really don't why. I really need your help in this because I'm doing it for my project in university and am planning on using parallax scrolling for my website .. I sent you an email with a zip file of my code, hope you'll find the time to check it, thank you

[@yousram8890]

I tried it again with the whole code in one sheet and it worked just fine! But I need to use the css and js in external sheets not embedded style.. I checked my links for css and js in the index.html and it's correct! I don't know what's the problem >.

[@optikalefx]

Yousra M 1) Your spacing is like non-existent. 2) You never closed the (function() { with a })(); 3) You never included jQuery 4) you spelled requestAnimationframe wrong in the loop, it should have a capital F 5) you need to load your JS at the end of your file, not the top

[@yousram8890]

optikalefx 1) Sorry but what do you mean by spacing? 3) How to include jQuery? 5) You mean in the index.file I should put the js file in the ? .. thank you for replaying

[@yousram8890]

Yousra M Ok it worked after I included the jQuery and fixed the loop and closed the function. Thank you so much for your help, but can you tell me what you meant by spacing?

[@optikalefx]

Yousra M Sure, so here is a screenshot of the file you sent me cl.ly/image/2J351e2e1O1A Everything is lined up to the left edge. There are no tabs or indentations.

[@NickolasKusha]

cool man )

[@JamesRCoston]

Nothing like being high and coding.

[@TechXSoftware]

looks cool, but it reminds me of windows 8 :(

[@renboy94]

Hi, thank you for this parallax tutorial. However, I am having problems with my code. The console says Uncaught SyntaxError: Unexpected token ; at line 114. It would be great if someone could help: pastebin.com/p5YVMevM

[@optikalefx]

You have a syntax error on line 114. })(jQuery(); Notice the open parenthesis that doesn't close? In the video we end with })(jQuery);

[@renboy94]

optikalefx Hi, I have tried it and the error went away but I still can't seem to make it work?

[@renboy94]

renboy94 Nevermind, I compared my code with the other's and fixed the bug. Thank you once again!

[@leobobo1]

Thank you so much for making this. One problem is I keep getting "Uncaught ReferenceError: $div is not defined". I am a JavaScript newbie, can anyone please let me know where did I mess it up? pastebin.com/VC08WKvz

[@optikalefx]

Line 67, you refer to $div instead of $divs. You do that in a few places. You define the variable $divs above, make sure you pay close attention to those "s"s

[@leobobo1]

optikalefx Thank you =)

[@ransombot]

if ((drunk || high) >= life) {return} else {return wakeUp}

[@fahadahaf]

optikalefx use emmet for christ's sake. you are spending too much time writing arbitrary markup

[@reginameyer3308]

Brilliant videos - very well explained. Thanks so much ! It works fine in chrome, but what ever I try, it wont run properly in mozilla firefox. Someone has an idea which part is wrong ? jsfiddle.net/gingin/pcsmnudy/

[@optikalefx]

Regina Meyer The firefox debugger sucks so I can't spend a lot of time figuring it out. However the problem is that in Firefox document.body.scrollTop is not giving a scroll position. Feel free to debug that in the console, but that's where you need to check. I'm not sure why it wouldn't give a scroll position, maybe there's a work around bug.

[@reginameyer3308]

optikalefx Thanks for your hint. //thing were scrolling top = (document.documentElement || document.body.parentNode || document.body).scrollTop; or better: var thingBeingScrolled = (document.documentElement || document.body.parentNode || document.body); it acually works now !!! in FF heres where I got it from: miketaylr.com/posts/2014/11/document-body-scrollTop.html

[@catwif7376]

There is a problem with the debugger in Mozilla Firefox