How To Add Parallax Scrolling To Your Website

206 Views

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.

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.




Games Security
Gmail
Exciting Feature you need to know about Gmail
Digital Marketing
Expanding Your Digital Marketing in 2017
SME Website Design
Five-Tier Guide to SME Website Design
External Giveaway Freebie TechnoGiants Giveaway
iCare Data Recovery Pro
Giveaway #39: iCare Data Recovery Pro Free Download with License Key
Mother's Day Campaign
Freebie: TechnoGiants Celebrating Mother’s Day
iCare Data Recovery Pro License Key
Giveaway #38: Free iCare Data Recovery Pro License Key for 3 Days Only
Android iPhone
Developing Mobile App
Top Hidden Costs of Developing a Mobile App
iPhone App Developers
5 Essential Things Every iPhone App Developers Must Know
Setting and Achieving Goals
5 Apps that help you with Setting and Achieving Goals
Adsense
Outsource SEO
5 tips that will help you with SEO Outsourcing
Search Engine Optimization
A Beginner’s Guide to SEO
Social Media Tips
7 Best Practices for Organic Link Building
MAC Software
Able2Extract Professional 11
6 Time-Saving Tricks: Featuring Able2Extract Professional 11
Review FotoJet
Review FotoJet: Create Photo Collages and Designs for Free
EHR
What Exactly EHR Companies Are Thinking About The Software Development Technology?
Blogging Social Media
WordPress Security
9 Simple Tips to Help Buff up Your WordPress Security!
Instant Games
Facebook Launches Instant Games- Users Get Ready to Play them in Just a Few Clicks and Touches
Social Media
5 Predictions about Social Media Marketing for the Year 2016
Debit cards
The Rise in use of Credit/Debit cards in India after Demonetization
Data Recovery
Infographic: Data Loss & Data Recovery
Magento Ecommerce Website
Infographic: Magento Ecommerce Website Design and Development
Xamarin Benefits
Infographic: Xamarin Benefits for Business
Read previous post:
Website SEO Friendly
Key Points to Remember for Making your Websites SEO Friendly

With the evolution of several internet technologies, the task of designing and setting up a website has become relatively easy....

Close