Advertisement
HTML & CSS

A Simple Parallax Scrolling Technique

by

Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it.

In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in!


Step 1: The Markup

This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes: "data-type" and "data-speed". Don't worry; I'll explain these later.

                <section id="home" data-type="background" data-speed="10">                            
                </section>   
                    
                <section id="about" data-type="background" data-speed="10">
                </section>

I am using the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5. This makes the HTML markup cleaner and easier to read.

According to the specification for Custom Data Attributes, any attribute that starts with data- will be treated as a storage area for private data. Additionally, this won't affect the layout or presentation.

Since all we need to do is control the speed of the background images, we'll use data-type="background" and data-speed="10" as key attributes to specify the necessary parameters.

I know what you're thinking: you're worried about IE. Never fear; I have a workaround for that too! We'll discuss it momentarily.

Next, let's add the content within the <article> tag inside each <section> .

                <section id="home" data-type="background" data-speed="10" class="pages">     
                         <article>I am absolute positioned</article>
                    </section>   
                    
                <section id="about" data-type="background" data-speed="10" class="pages">
                         <article>Simple Parallax Scroll</article>
                </section>

What we're attempting to do here is making the <section> background scroll slower than its content, i.e <article>. This will help us create a parallax illusion. Before moving on to the jQuery magic, let's add the background images in our CSS for each <section>.

                                
                #home { 
                background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
                }
                
                #about { 
                background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px;  
                }

Upon adding backgrounds for both sections, it should look like:

image
image

Let's add some more CSS to style and spice up the page!

                #home { 
                  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                }
                
                #home article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }
                
                #about { 
                  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
                  height: 1000px; 
                  margin: 0 auto; 
                  width: 100%; 
                  max-width: 1920px; 
                  position: relative; 
                  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
                  box-shadow: 0 0 50px rgba(0,0,0,0.8);
                }
                
                #about article { 
                  height: 458px; 
                  position: absolute; 
                  text-align: center; 
                  top: 150px; 
                  width: 100%; 
                }

Now it should look like this...

image

Step 2: The Magic Code

Yep, that's right; this is where the magic begins! Using jQuery, we'll begin with the standard document.ready() method to ensure that the page has loaded and is ready to be manipulated.

                $(document).ready(function(){
                                        
                
                });

This technique revolves around controlling the speed of the background image that exists in both sections.

Now I need your attention here. The first thing happening below is that we're iterating over each <section> in the page, which has the atrribute data-type="background".

                $(document).ready(function(){
                
                    $('section[data-type="background"]').each(function(){
                      var $bgobj = $(this); // assigning the object
                    }); 
                
                });

Add another function, .scroll(), inside .each(), which is invoked as the user begins scrolling.

                $(window).scroll(function() {
                   
                });

We need to determine how much the user scrolled up, and then divide the value by the data-speed value, mentioned in the markup.

                var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop(): we are getting the current scroll value from the top. This basically determines how much the user has scrolled up. $bgobj.data('speed') refers to the data-speed assigned in the markup, and yPos is the final value that we need to apply for scrolling. However, it will be a negative value, because we have to move the background in the opposite direction of the user's scroll.

Let's investigate a bit more with an example:

image

In the above image, data-speed is 10, and let's assume that the browser window has scrolled 57px. This means 57px divided by 10 = 5.7px.

                // Put together our final background position
                var coords = '50% '+ yPos + 'px';
                
                // Move the background
                $bgobj.css({ backgroundPosition: coords });

The last thing that we need to do is put together our final background position into a variable. In order to keep the horizontal position of the background as static, we've assigned 50% as its xPosition. Then, we added yPos as the yPosition, and, finally, assigned the background coordinates to our <section> background: $bgobj.css({ backgroundPosition: coords });.

Your final code might look like:

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object
    
        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed')); 
            
            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        }); 
    });    
});

Yay, we've done it! Try it out for yourself.


IE Fix

There's one last fix: older IE can't render the <section> and <article> tags. That's easy to fix, though; we'll use the standard solution of creating the elements, which makes the browser magically recognize the HTML5 tags.

                    // Create HTML5 elements for IE
                     
                    document.createElement("article");
                    document.createElement("section");

Additionally, we need to use a basic CSS reset file in order to make all the browsers play nicely. Luckily, tools, like HTML5 Boilerplate take care of the brunt of the work for us, when it comes to cross-browser normalizing.


That does it for this lesson! Any questions or notes that you'd like to add? Let me know below!

Related Posts
  • Web Design
    HTML & CSS
    How to Add Branded Branch Locations to Google MapsMap thumb
    In this tutorial we'll walk through the process of creating a branded Google map for an imaginary client.Read More…
  • Web Design
    HTML/CSS
    Build a Top Bar Off-Canvas Navigation With Foundation 5Foundation menu
    Today, we are going to combine ZURB's Foundation 5 Off-Canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users. Read More…
  • Web Design
    Case Studies
    How They Did It: Typekit's New HomepageTypekit retina
    Typekit recently redesigned their homepage with some new services in mind. When Typekit joined Adobe, they set out to bring us a new way to handle fonts on the web. Not only did they create a fairly simple way to embed fonts on the web, but they have now officially launched a desktop sync option, which allows Creative Cloud subscribers to sync fonts to their computer directly from Typekit. This has been in a beta form for a while now, and provides a much easier route to local fonts than finding them elsewhere!Read More…
  • Web Design
    HTML/CSS
    Building the Merry Christmas Web App InterfaceXmas build 2 retina
    Today we're going to build the Merry Christmas Web App Interface; a Photoshop layout from an earlier tutorial by Tomas Laurinavicius.Read More…
  • Web Design
    Case Studies
    How They Did It: Alice in VideolandAlice retina
    This summer I started building a modern retelling of "Alice in Wonderland", an interactive storybook web app by the name of Alice in Videoland. It ended up being featured in a sister article in Adobe Inspire as well as turning into an encore-winning presentation I gave at CSS Dev Conf 2013. The project was meant to be educational, a testing ground for new CSS animation techniques and desktop-to-tablet JavaScript. I keep Alice's source up on GitHub where anyone can examine my code, but sometimes it's nice to have someone go over the reasoning with you.Read More…
  • Web Design
    Case Studies
    How They Did It: Flickr RedesignFlickr how they did it retina
    Fresh on the heels of Yahoo!'s acquisition of Tumblr, Yahoo! has implemented a complete redesign of Flickr.com. This was met with some strong criticism as well as strong praise, a lot of which has been attributed to Yahoo!'s new leader, Marissa Mayer. In this article, we will talk about the design decisions and some of the implementation details in the redesign, and we will open some conversation about Yahoo!'s acquisition of Tumblr.Read More…