News

Create interactive parallax scrolling pages with jQuery

Power up parallax scrolling with rotating and scaling page elements

oakley

Occasionally websites come along that capture the imagination of the web design community as well as the general web user. One such recent example was a ski-goggle site for eyewear brand Oakley. The website was one long page that featured several parallax effects which were driven by the user scrolling down the page. Rather than simply moving the page, as the user scrolls the page animates elements within it, making for a fun and memorable interaction that engages the visitor.

In this tutorial we’re going to show you how you can recreate an effect similar to the top of the Oakley website. First we’ll build a series of layers that will be positioned over the top of each other to generate a composite image, then as the user scrolls we’ll move each of these layers in a different way to create a feeling of depth and interaction.

DOWNLOAD TUTORIAL FILES

Seek inspiration

para02

The Oakley website is providing inspiration for our design, so it’s worth having a quick look at what the designers have done to get a sense for how it works. Visit http://moto.oakley.com and play with the site to see the different elements that make up the page.

Design your mock up

We’re going to use a technique first described by designer James Davies to create a colourful explosion of 3D text, although you could combine any elements you choose to generate your own layout. Have a clear idea of where you’re aiming, then fire up your image editor and start compositing elements.

Keep it separate

In order for the effect to work, we’re going to need several different layers of elements that move independently, so keep in mind as you design your graphics that you’ll need to save them separately into different transparent PNG files. Combine elements into planes for ease of saving later.

Blur elements

To give a sense of depth to the scene you can blur items closest to the camera, as if they’re outside the focal plane. We used motion blur on our elements to also suggest movement, which we’ll use later in our animation to help sell the effect. Save all your final assets into transparent PNG files, or grab ours from the cover disc.

Basic HTML

Generate your HTML using your standard approach. We’ve used a hybrid version of the HTML5 boilerplate template to get us started. Create three <sections> on your page. The first will contain the parallax elements, while the second will feature a plain background that scrolls over the top.

001 <!DOCTYPE html>
 002 <!--[if lt IE 7]>      <html class=”no-js     lt-    ie9 lt-ie8 lt-ie7”> <![endif]-->
 003 <!--[if IE 7]>         <html class=”no-js     lt-    ie9 lt-ie8”> <![endif]-->
 004 <!--[if IE 8]>         <html class=”no-js     lt-    ie9”> <![endif]-->
 005 <!--[if gt IE 8]><!--> <html class=”no-    js”>     <!--<![endif]-->
 006    <head>
 007        <meta charset=”utf-8”>
 008        <meta http-equiv=”X-UA-Compatible”     content=”IE=edge,chrome=1”>
 009        <title>Oakley-style parallax     010    scrolling</title>
 011        <meta name=”viewport”         012 content=”width=device-width” />
 013        <link href=’http://fonts.googleapis.    com/css?family=Nova+Round’ rel=’stylesheet’     014 type=’text/css’>
 015        <link rel=”stylesheet” href=”styles/    screen.css”>
 016       <script src=”scripts/lib/modernizr-    017 2.6.2.min.js”></script>
 018    </head>
 019    <body>
 020        <section id=”top”>
 021        </section>
 022        <section id=”info”>
 023        </section>
 024        <section id=”about”>
 025        </section>        
 026        <!-- End Site Content -->
 027        <script src=”http://ajax.googleapis.    com/ajax/libs/jquery/1.9.1/jquery.min.js”></    script>
 028       <script>window.jQuery || document.    write(‘<script src=”scripts/lib/jquery-    1.9.1.min.js”></script>’)</script>
 029       <script src=”scripts/oakley.js”></    script>
 030   </body>
 031 </html>    

Fill in the content

Add a <div> for each different element in your parallax design, excluding the background (which can simply be applied to the <section> itself). We’ve used a total of five different elements in addition to the background, so have five <divs>. Add some content for the second section too.

Add some style

We’ll start off by styling up the second section so that it doesn’t provide any distraction. You’ll notice that we nested a <div> inside the section. This allows us to make the <section> full width, but keep the contents a maximum of 960px wide. Add the rules that are shown to your stylesheet.

001 section#info {
 002    position:            relative;    
 003    background:            #00a2fe;
 004    height:                600px;
 005    color:                #fff;
 006    padding-top:        80px;
 007 }
 008 section#info div {
 009    position:            relative;
 010    width:                960px;
 011    margin:                auto;
 012    font-size:            1.4em;
 013 }
 014 section#info h1 {
 015    font-size:            4em;
 016    text-transform:            017 uppercase;
 018    margin:                0;
 019    padding:            0;
 020    text-shadow:        2px 2px 4px #3864ab;
 021 }
 022 section#info h2 {
 023    font-size:            2.7em;
 024    margin:                0;
 025    padding:            0;
 026    text-shadow:        2px 2px 4px #3864ab;
 027 }
 028 section#info p {
 029    width:                40em;
 030    text-align:            justify;
 031    line-height:        1.8em;
 032 }

Parallax style

For each element within our parallax section we need to add a basic stylesheet rule to establish the position, background image and height. Note that we’ve used the background-attachment property on the <section> to fix the background in place, and that all the <div>s are positioned absolutely.

Load and test

Load your page in the browser to check that everything aligns correctly and you’re getting a good composite effect. All being well you should see something akin to your original graphical mock up, but as you scroll you’ll notice the background remains static while the rest of the elements move as one.

Set up scripts

Our HTML template already had jQuery integrated into it, but if you haven’t used our code make sure you’ve visited jQuery.com and downloaded the library for inclusion on your page. Create a blank JavaScript document and save it as Oakley.js. Include the script in your page underneath the HTML content.

Basic events

Everything happens in response to the user scrolling, so let’s set that up. We’ll add an event listener to the window object so that a function is fired each time the user scrolls the page. Inside this function, add the code to manipulate each of the <div>s we’ve set up.

001 jQuery(document).ready(function($){
 002    $(window).scroll(function(){
 003        // Calculate the current amount of scroll
 004        currentoffset = $(this).scrollTop();
 005        // Do some processing on each of the     006 <div> elements
 007    });
 008 });

Boom!

We’ll start by changing the position of the BOOM text when the page scrolls. We almost want it to stay still relative to the background, but it’s okay for it to creep up a little bit as the page scrolls down. If we offset the text the same number of pixels as has been scrolled, it would remain static, so we’ll use a bit of maths to offset slightly less than that.

001 /* BOOM TEXT */
 002            /* this offset is calculated as being     the same number
 of pixels as the scroll amount, less a     maximum of 100
 pixels assuming the page has scrolled     to 500 pixels */
 003            thisoffset = currentoffset -         100*(currentoffset/500);
 004            /* Use jQuery to set the CSS top     property to the calculated offset */
 005            $(“#boom”).css({top:thisoffset});

Ensure that there’s no unnecessary movement

If we were to leave our code as it was, any calculated values would continue to be affected as we scroll, even if our page was 20 sections long. Add a rule to only run the animation code if the page scroll is less than 601 pixels to improve performance by limiting the effect of the scroll.

001 jQuery(document).ready(function($){
 002     $(window).scroll(function(){
 003        currentoffset = $(this).scrollTop();
 004        if (currentoffset<601) {
 005            /* BOOM TEXT */
 006            thisoffset = currentoffset -         100*(currentoffset/500);
 007            $(“#boom”).css({top:thisoffset});
 008        }
 009    });
 010 });

The next level

Now we’ve got our text moving in the way that’s desired, we can then apply the same methodology to the other elements contained within our parallax scene. Start with the extra clouds that are positioned in front of the background. We’ll use the same technique as before, but we’ll also scale this up marginally as the scrolling increases.

Bits and pieces

Continue working your way through the different elements, designing the amount and type of movement that you want to be shown. Always remember that if you want the element to remain static, then you need to offset by the same amount as the scroll. Less will move the element up the page, and more will move it down the page. You’ll see that we’ve also applied rotation to one of our elements.

001 /* BITS 1 */
 002            thisoffset = currentoffset -         100*(currentoffset/300);
 003            thisrotation =             25*((currentoffset/500));
 004            $(“#bits1”).css({top:thisoffset,transf    orm:”rotate(“+thisrotation+”deg)”});
 005            /* BITS 2 */
 006            thisoffset = currentoffset -         100*(currentoffset/700);
 007            $(“#bits2”).css({top:thisoffset});

Scale the blur

Finally, with the blurred elements we can offset them and scale them at the same time. By making them get bigger as the page scrolls, they appear to be coming towards the camera. This effect works particularly well because of the motion blur in the design. Remember that you’ll also need to offset the position on the page.

001        /* BITS 3 */
 002            thisoffset = currentoffset -         100*(currentoffset/700);
 003            scalebit3 = (currentoffset/500)+1;
 004            $(“div#bits3”).css({top:thisoffset,tra    nsform:”scale(“+scalebit3+”)”}); 

Tweak the effect

Finally, now that you’ve got all of the elements moving on the page in response to the user scrolling, you need to test and tweak your maths to get the smooth, pleasing effect that’s required. This is a crucial part of ensuring that the final composite works as a whole, so spend the time adjusting your code to get the best-possible end result.

×