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

Parallax Scrolling

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.

Games Security
Blu-ray Player
Specs to Look Out for When Buying a New Blu-ray Player
Best Web Designing Tools
Best Web Designing Tools You Can’t Live Without
Email Marketing Software
How to Choose Your Email Marketing Software for Your Business?
External Giveaway Freebie TechnoGiants Giveaway
Focusky Pro
Giveaway #41: Focusky Pro 3-months Plan Subscription
MacXDVD
Freebie: MacXDVD Gives Away 10K Free Copies of MacX Video Converter
Flipbook
Giveaway #40: FlipHTML5 Flipbook 3-months Platinum Plan Subscription
Android iPhone
Backup Contacts
How to Backup Contacts from Samsung Galaxy S8 to Computer
Android Games
7 Amazing Offline Android Games You Must Have
Road Trips
Best iOS Apps for Enhancing Your Road Trips
Adsense
Link Building Strategies
Link Building Strategies for Your Website in 2017
Guest Posting
6 Tips to Maximise Your SEO Efforts with Guest Posting
On-Page SEO
5 Ways Content Editors can kill your On-page SEO
MAC Software
Lotus Notes
How To Setup Archive Lotus Notes Emails To Local Disk & Save Locally
Business
Poor Employers in the Age of Technology
Store
How to Store and Protect Valuable Business Data?
Blogging Social Media
Blog
5 Effective Ways To Save Time While Writing Blog Posts
Facebook Marketing
6 Tips for Using Video Marketing on Facebook
Time Management
8 Time Management Strategies for Fellow Bloggers
Mobile Technology
Infographic: How Mobile Technology Can Impact Your Sales
Social Media
Infographic: Social Media Behaviors to Avoid in 2017
Social Video
Infographic: 3 ways Social Video Marketing can Propel your Brand
Data Entry
Infographic: Should You Outsource Your Data Entry? Here are 5 Questions to Ask!