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
Business Intelligence
How Business Intelligence & Analytic Tools Contribute to Your Business Growth
Inbound Marketing
The Techniques and Channels of Inbound Marketing in 2017
Biometrics
Using Biometrics as a Means of Securing User Privacy
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
Galaxy C8
Samsung Galaxy C8 – The Fastest Samsung Phone
iPhone X
How iPhone X Can Make an Entrepreneur’s Life Easy
Business App
6 Mistakes to Avoid When Creating Your First Business App
Adsense
SEO
Beginners Guide to Effective SEO
SEO
SEO Fundamentals that Remain Unaffected by Algorithm Changes
Joomla
Top Joomla SEO Tips Which You Must Enable on Your Website
MAC Software
Billing Software
9 Common Misconceptions About Billing Software
Functions
9 Brilliant Google Secret Functions to Make Your Life Super Easy
Xen VPS
How Dedicated Xen VPS is better for hosting your business website?
Blogging Social Media
Loading Speed
How to Improve Loading Speed of Your Website?
Blog Post
The Main Guide to Writing Blog Posts That Rank in Google
Website Designing
Top 10 benefits of today’s Minimalistic Website Designing
Online Presence
Infographic: How to Maintain a Professional Online Presence as a Service Provider
Smart Cities
Infographic: 3 Reasons Behind the Need for Smart Cities
Customer Loyalty
Infographic: 6 Ways Social Media Can Help Build Customer Loyalty
Messages
Infographic: Top Reasons Why Your Business Needs to Archive Text Messages