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
Cyber
6 Dangerous Myths About Cyber Security You Need To Stop Believing Today
Documentation
The Evolution of Documentation Methods and Tools
Email Marketing
17 Email Marketing Tips to growth hack Your Ecommerce sales and conversion
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
Finger Print
What Are the Advantages of Fingerprint Locks in Mobiles?
Lock your Android
How to Get Your Android Device Protected from Spyware?
iOS 11
8 Really Unknown Features of iOS 11 Entering in your iPhone
Adsense
Backlinks
How to Build SEO Backlinks: A Beginner’s Guide?
Progressive Web Apps
Turn Your Website into an Application: Progressive Web Apps & SEO
Management
6 Ways Project Nucleus Will Change SEO Management Forever
MAC Software
Microsoft Outlook
How to Open Oversized PST File of Microsoft Outlook in Windows
Windows Data Recovery
Lost Data Recovery with Stellar Phoenix Windows Data Recovery – Home (verified)
Technology
How Technology Has Changed the Way of Shopping
Blogging Social Media
Write
Blogging Ideas For When You’re Stuck, Tired And Can’t Write A Thing
Twitter Marketing
Twitter Marketing Tips for 2017
Earning
Top 5 Strategies and Concepts for Earning Online Through Blogging
Customer Loyalty
Infographic: 6 Ways Social Media Can Help Build Customer Loyalty
Messages
Infographic: Top Reasons Why Your Business Needs to Archive Text Messages
Mobile Technology
Infographic: How Mobile Technology Can Impact Your Sales
Social Media
Infographic: Social Media Behaviors to Avoid in 2017