• Monday , 16 October 2017

Javascript Parallax Effect Explained

Code Canyon



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.

Original source

3d Ocean

Related Posts

32 Comments

  1. Augusto Paredes
    September 27, 2017 at 22:40

    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

  2. baseballrunner76
    September 27, 2017 at 22:40

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

  3. New Wave
    September 27, 2017 at 22:40

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

  4. Regina Meyer
    September 27, 2017 at 22:40

    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 ?

    http://jsfiddle.net/gingin/pcsmnudy/

  5. theinterworks
    September 27, 2017 at 22:40

    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. 

  6. alex Graph
    September 27, 2017 at 22:40

    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

  7. Fahad Hossain
    September 27, 2017 at 22:40

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

  8. Erica Dreisbach
    September 27, 2017 at 22:40

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

  9. Rajesh Nabojja
    September 27, 2017 at 22:40

     
    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

  10. renboy94
    September 27, 2017 at 22:40

    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: http://pastebin.com/p5YVMevM

  11. Mohit Rana
    September 27, 2017 at 22:40

    bro it is not working in mozilla firefox? Any solution…!!!!

  12. Yousra M
    September 27, 2017 at 22:40

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

  13. drunkgummyboy
    September 27, 2017 at 22:40

    #optikalefx   op is there a way you would like too upload the whole document because i cant make it to work?,
    or is there somebody else who got it to work and want to share it?

  14. hayley carr
    September 27, 2017 at 22:40

    hello nice video, i am having a problem with my code. it will be a great help if you told me what i did wrong thx 
    pastebin –pastebin.com/H24s4Y1i

  15. eZaY
    September 27, 2017 at 22:40

    Is you script open source ???

  16. Marshal Jose
    September 27, 2017 at 22:40

    Thank you so much

  17. optikalefx
    September 27, 2017 at 22:40

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

  18. remigroot
    September 27, 2017 at 22:40

    Hii optikale! thanks fot the clear and helpfull tut. unfortunately the effect stilll doesn't work. i checked the other cases you helped but i can not seem to find what the problem is. is checked the consols with the console.log(document.body.scrollTop); and the console.log($divs);. only with the last one i get the following: Object[div.parallax-background.pat_1, div.parallax-background.pat_2, div.parallax-background.pat_3, div.parallax-background.pat_4]. could you please have a look at my code?

    http://pastebin.com/budPpSbA

    thanks alot!

  19. Harshana Narangoda
    September 27, 2017 at 22:40

    Would someone please be able to checkout my code? I'm extremely new to this so I'm having trouble spotting the mistake..
    http://pastebin.com/4LUVRmmn

  20. Bhavi Hirani
    September 27, 2017 at 22:40

    I have put the code in but it still doesnt seem to work? Checked on Dreamweaver and Sublime Text and still can't figure it out! Any chance you can have a quick look:

    http://pastebin.com/uSf0wQfr

  21. Sorabh Anand
    September 27, 2017 at 22:40

    what drawing software is that?

  22. Tushant Khatiwada
    September 27, 2017 at 22:40

    why my code didnot show the effect of parallaxing . Would you please once check this ? http://pastebin.com/TxUFeSKs

  23. Jq Bao
    September 27, 2017 at 22:40

    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

  24. migs morre
    September 27, 2017 at 22:40

    hello sir..thanks for this great video…i have tried this but it didnt work…can you help me..?thanks..http://pastebin.com/RY1fa6Pf

  25. Botchy1997
    September 27, 2017 at 22:40

    Would someone please be able to checkout my code? I'm extremely new to this so I'm having trouble spotting the mistake. Parallax scrolling is not working and my text has not turned white. http://pastebin.com/Rm4Qyiz6 Thanks.

  26. Botchy1997
    September 27, 2017 at 22:40

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

  27. Pablo Mvrvaga
    September 27, 2017 at 22:40

    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.

  28. Praveen Inbasekaran
    September 27, 2017 at 22:40

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

  29. Ross Ahlvin
    September 27, 2017 at 22:40

    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.

    "<html>
    <head>
        
        <script type="text/javascript src="web/src/html/images" 
    <script>

    </script>
        
        <style type="text/css">
    body {
    margin:0;
    padding:0:
    }
    ul {
    margin:0;
    padding:0:
    }
    ul li {
    list-style:none;
    overflow:hidden;
    height:600px;
    }

    .parallax-background {
    height:700px;
    }

    .me {
    background-image:url('me.jpg');
    }
    .pro {
    background-image:url('pro.png');
    }
    .dead {
    background-image:url('png');
    }

        </style>
        
        </head>
        <body>
        
    <ul class="parallax">
            <li>
                <div class="parallax-background me"></div>
                </li>
             <li>
                <div class="parallax-background pro"></div>
                </li>
              <li>
                <div class="parallax-background dead"></div>
                </li>
            </ul>
        
       
        
        
        </body>
    </html>"

  30. Ross Ahlvin
    September 27, 2017 at 22:40

    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

  31. Ciel
    September 27, 2017 at 22:40

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

  32. Timothy Tong
    September 27, 2017 at 22:40

    +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!
    http://pastebin.com/NRhJLUNj

Leave A Comment

You must be logged in to post a comment.