D4mations.com

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.

Original source

d4mer

, , , , , , , , , ,

32 responses to “Javascript Parallax Effect Explained”

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

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

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

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

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

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

Leave a Reply