How To Add Parallax Scrolling To Your Website

If you’ve ever played Super Mario Brothers on the original Nintendo, you’ve experienced parallax scrolling. It’s a 2D computer graphics technique that helps create an illusion of depth. It’s where the background images move slower than the images in the foreground. Here’s a visual example (derived from none other than a Super Mario game!):

Parallax scrolling has been around for a while, but it wasn’t until 2011 that it started being incorporated into websites. As far as we know, that year Nike Better World rolled out the first parallax website ever, and the trend eventually caught on. Today, there are many amazing, jaw-dropping, drop-dead gorgeous websites that use the parallax effect beautifully. Here are a few examples:

Boy-Coy (our favorite one): http://boy-coy.com/#apps

HotDot: http://hotdot.pro/en/#lophoto

First Manned Flights: http://f6design.com/projects/parallax-scrolling/

Some web designers agree that the trend is sometimes overused, with a lot of websites abusing the effect (see http://journey.lifeofpimovie.com/), but that doesn’t mean you shouldn’t add the parallax effect to your own website! If done tastefully, your website will turn heads and give your visitors a memorable user experience.

In fact, you can do it in 4 steps! Here’s how:

Step #1: Create an HTML markup

This HTML markup will help you control the speed of the background image. You need to create at least 2 sections (in this example, home and contact). The code is as follows:

<sectionid=”home”data-type=”background”data-speed=”10″>                           

<sectionid=”contact”data-type=”background”data-speed=”10″>

This markup won’t affect any visual aspects of your website, because it’ll be marked as private data. (hence the “data-“ attribute).

Step #2: Add an tag within each section.

The purpose of this step is to make the background scroll slower than the content (). Here’s the code:

<sectionid=”home”data-type=”background”data-speed=”10″class=”pages”>    

         ADD CONTENT HERE

<sectionid=”contact”data-type=”background”data-speed=”10″class=”pages”>

         ADD CONTENT HERE

Step #3: Add the background images.

Now that you have the scrolling effect down pat, it’s time to add the background images for each section (in this case, one image for home, and another image for contact). Go to your CSS file and add the following code:

#home {

background: url(home-bg.jpg) 50%0repeatfixed; min-height: 1000px;

}

#contact {

background: url(contact-bg.jpg) 50%0no-repeatmin-height: 1000px; 

}

Play around with the coding until you get the results you’re looking for. You can add more CSS to specify the style of the background and the content in the foreground. For example, you can add box shadows or play around with the width, position, and the alignment of the text. The possibilities are endless!

Step #4: Create a document.ready function in jQuery.

This function will indicate how fast you want your content to scroll against your background. This will also implement an equation: Browser scroll /data speed = final value. It helps make the background move in the opposite direction of your scrolling. For example, let’s say you keep the data speed in the HTML markup at 10. The following function will help determine how much you scrolled up, so the background can follow suit at its own speed and direction. Add the following function, and of course tweak it to suit your preferences.

$(document).ready(function(){

    $(‘section[data-type=”background”]’).each(function(){

        var$bgobj = $(this); // assigning the object

        $(window).scroll(function() {

            varyPos = -($window.scrollTop() / $bgobj.data(‘speed’));

            // Put together our final background position

            varcoords = ‘50% ‘+ yPos + ‘px’;

            // Move the background

            $bgobj.css({ backgroundPosition: coords });

        });

    });   

});

Well, that’s all you need to do! Please note that all the above codes are basic and bare-boned. It’s up to you to put in any additional HTML, CSS, or jQuery lines if you wish and play around with the numbers to get the results you want.

About Author: This guest post was written by Simon, who is working for Jangomail a mass e-mail service provider.