Achieve an Extensible, Multilayered Scrolling Parallax Effect in Minutes

Tara Hornor
Tweet

I’ve been wanting to implement a Parallax effect for awhile, but I couldn’t find an “easy” technique anywhere. True to form, this tutorial isn’t easy for those who do not have any experience with modifying JavaScript or CSS. But this is as easy as it gets, and the steps I’ve broken this tutorial down into should be simple enough for even a novice to follow.

Here’s the final version of what you’ll be creating and the resource files for it:

Demo: Download (ZIP – 700k)

This Parallax effect was initially developed by Jonathan Nicol over at Pixel Acres/F6 Design. I couldn’t have put this together without his work and want to make sure to acknowledge his hard work.

The rest of this tutorial will focus on walking you through how to slowly build up this effect so that you can modify it to suite your specific needs. Too many other tutorials throw you right into the fray, leaving out a lot of the details that you’ll need for editing the design.

I like this Parallax version (and I tried dozens), because it has three independent layers that you can easily adjust. You can add text or use images easily, although this tutorial will use images as background, floating elements.

If you want to use your own images, make sure they are transparent PNG files. I have not tested the GIF format, and JPG files will not be transparent. Unless you are using perfect squares in your background images, you’re going to want the transparent PNG format.

So, hold on and have some fun as we scroll into the interesting rabbit hole of Parallax effects.

Step 1: Download Files

To get started, download the resources needed to complete the tutorial. You’re going to need four pre-built files:

  1. jQuery 1.6 – the jQuery engine that makes all things work
  2. Modernizr.js – a jQuery effect that gives us a nice smooth scrolling effect if navigation elements are clicked
  3. Parallax.js – the jQuery effect that makes the Parallax effect work
  4. Main.css – my CSS file

Other files include the images that I used for this tutorial that you will (hopefully) replace later. Download the full assembly of files using the link above.

Step 2: Head Content

Open up a new HTML document in your favorite HTML or text editor. You’re going to copy and paste the following code:

<html>
<head>
<title>Parallax Tutorial - Start Here</title>
<meta name="description" content="Parallax Tutorial" />
<link rel="stylesheet" media="all" href="css/main.css" />
<script src="js/modernizr.custom.37797.js"></script>
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/parallax.js"></script>
</head>
<body>
</body>
</html>

This won’t get you much, but it’s a critical start. In the head section of the HTML, we have the links to our files, so make sure you save this HTML file in the main folder with the CSS file in a sub-folder called “css” and the JavaScript in a folder called “js”, or this won’t work. Open up the “01-start-here.html” file from the download to double check your work.

Step 3: Adding Content

Now, we can start to add content to the HTML. This code goes between the <body> tags:

<div id="wrapper">
<div id="content">
<!-- Page #1 -->
<article id="page-number-1">
<header>
<h1>Parallax Demo</h1>
</header>
<p>This is a sample Parallax scrolling site with three pages. You can add all kinds of extra navigation elements on your own time, but I just wanted a simple, ready to rollout, vertical parallax system that I could easily implement and edit later.</p>
<nav class="next-prev">
<hr />
<a class="next page-number-2" href="#page-number-2">Next</a>
</nav>
</article>
<!-- Page #2 -->
<article id="page-number-2">
<header>
<h1>Wow!</h1>
</header>
<p>Did you like that nice, smooth movement? Pretty slick, eh? You can either scroll or click on the navigation elements below. It's your decision. You're an adult. I'll leave that up to you. </p>
<nav class="next-prev">
<a class="prev page-number-1" href="#page-number-1">Prev</a>
<hr />
<a class="next page-number-3" href="#page-number-3">Next</a>
</nav>
</article>
<!-- Page #3 -->
<article id="page-number-3">
<header>
<h1>More stuff...</h1>
</header>
<p>You can add as many pages as you want, but it takes some work to get all the CSS, and JS working together. Just remember that each page you add needs to have this HTML, the CSS, and the parallax.js file updated with the new page. Don't worry, you'll be a pro before you know it!</p>
<nav class="next-prev">
<a class="prev page-number-2" href="#page-number-2">Prev</a>
<hr />
<a class="next page-number-4" href="#page-number-4">Next</a>
</nav>
</article>
<!-- Page #4 -->
<article id="page-number-4">
<header>
<h1>Last page!</h1>
</header>
<p>Of course, there are all kinds of HTML and JS additions you can make. From navigation bars to the Lettering.js jQuery plugin, there's no limit. This parallax technique only relies upon the basic CSS and lightweight jQuery plugins to create the effect. Time for you tweak it and make it your own!</p>
<nav class="next-prev">
<a class="prev page-number-3" href="#page-number-3">Prev</a>
<hr />
</nav>
</article>
</div>

Now, we need slow way down and look at what we’ve just done. There are a couple of predefined elements I’m using that we need to examine.

  • Each page of your site will need to start with <article> to designate the content properly.
  • The title section of each page is designated by the <header> tag. This is where the page will rest when scrolling after clicking one of the navigation buttons.
  • <nav> is where to put the navigation links. You can create your own of course, but these are the pre-built versions.

To add a new page, you will have to edit three files:

  • HTML document
    • Add a new page that includes the <article> and unique ID – id=”page-number-5″, for example.
    • Update the navigation element of the previous page to include your new page. Reference the ID name you gave it.
  • CSS document
    • Under the “content article” section, add your page ID to the list
    • Add a new #page-number-5 tag (or whatever you called your page) under the “content article” tag. Make the position absolute and the height in increments of 1090 px – so page five will be height:4360px; as an example.
  • Parallax.js
    • Add a new function for the new page (don’t freak out! This is easier than it sounds!)
    • Just copy and paste the “page-number-4″ function and rename the ID inside it

Check out the finished version of this step in the “02-add-content.html” file from the downloadable resources.

Step 4: Adding Background Images

Below your content and above your closing </body> tag, add this code:

<div id="parallax-bg1">
<img id="bg1-1" src="img/cloud1.png" alt="cloud"/>
<img id="bg1-2" src="img/cloud2.png" alt="cloud"/>
<img id="bg1-3" src="img/cloud1.png" alt="cloud"/>
<img id="bg1-4" src="img/cloud2.png" alt="cloud"/>
<img id="bg1-5" src="img/cloud1.png" alt="cloud"/>
</div>

This adds the images in the background or the “farthest” layer. In other words, these images move the least. You can individually position each image using the CSS document. Just open the CSS doc and search for “background image” and you will see how each is positioned.

To add a new image, you will need to duplicate and rename the a new CSS attribute for each image.

See the “03-background-images.html”  file within the download for the finished step.

Step 5: Adding Midground Images

This is just like the previous step, so paste this code under the code for the background images:

<div id="parallax-bg2">
<img id="mg2-1" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-2" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-3" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-4" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-5" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-6" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-7" src="img/cloud3.png" alt="cloud"/>
</div>

Notice that I used the same image over and over again and I used several more than the background image. This is the beauty of this effect, as it allows you to reuse elements if you want or add lots of different images or text. Just make a new CSS attribute for each new image that you want to add and position it as needed.

You can edit the position of each element in the CSS file under the “midground image” section. See the final piece in the “04-midground-images.html” file within the download.

Step 6: Adding Foreground Images

You should be a champ at this by now. Same thing as Steps 5 and 6:

<div id="parallax-bg3">
<img id="fg3-1" src="img/twitter.png" width="529" height="386" alt="Big freaking Twitter bird"/>
<img id="fg3-2" src="img/facebook.png" width="603" height="603" alt="Facebook in your face!"/>
<img id="fg3-3" src="img/linkedin.png" width="446" height="446" alt="LinkedIn logo"/>
<img id="fg3-4" src="img/landscape.png" width="1104" height="592" alt="Landscape foreground"/>
<img id="fg3-5" src="img/design-festival-logo.png" width="135" height="136" alt="Bluified Design Festival logo"/>
</div>

Once again, the position can be easily edited for these images in the CSS document under “foreground images”.

See the finished step in the file “05-foreground-image.html” with the files.

Step 7: Adding Navigation Elements (Optional)

I’m only adding this step because Johnathan Nicol did such a great job that I thought it was worth keeping his idea in this tutorial. You can place this code anywhere within the <body>, but I like to keep it at the top (but below the opening content div):

<nav id="primary">
<ul>
<li>
<h1>Intro</h1>
<a class="page-number-1" href="#page-number-1">View</a>
</li>
<li>
<h1>Wow!</h1>
<a class="page-number-2" href="#page-number-2">View</a>
</li>
<li>
<h1>More stuff...</h1>
<a class="page-number-3" href="#page-number-3">View</a>
</li>
<li>
<h1>Last page!</h1>
<a class="page-number-4" href="#page-number-4">View</a>
</li>
</ul>
</nav>

If you want more pages, it’s as easy as adding another <li> and your content. Make sure to update the anchor text properly and you’re all set.

The version with nav code is “06-navigation.html” in the resource files.

Conclusion

Adding impressive effects doesn’t have to take third-party browser plugins or a lot of expertise. You can create scrolling effects with standardized technologies and widely-used script libraries. After that, it’s up to the designer to add their own flair. I hope you liked the scrolling effect! Feel free to share your implementations (or other’s) in the comments.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://twirlbound.com MvdLaar

    Awesome work! Maybe you could place a live demo at the top, so that people don’t have to download in order to view? :)

  • http://www.webdesign.org Julia Agnes

    WOW! Thanks a lot for this informative tutorial! I’ve learned a lot!

    • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

      Awesome!

  • http://inventti.com Jorge Solano

    Tara, great tutotial!!!!! Thanks for this job,,….

    • https://plus.google.com/u/0/117883511520701899763?rel=author Tara Hornor

      Thanks! Glad you enjoyed it. :)

  • Johan

    Informative, thanks. I had to look around.. and ended up going to Pixel acres/F6 design to find a demo. Could you perhaps add a link to the demo in your article.. would help a lot! :-) Thanks!

    • Val

      Seriously… I link to a sample or demo of what this thing is would have been oh so helpful. I’ll take the advice of the other commenter and follow the link to Pixel acres and look around.

      • Tara Hornor

        Sorry for the trouble! I hope that you’ve seen that the link to the demo now works.

  • Erik

    How would you modify the jscript to make it scroll horizontally?

    • Tara Hornor

      Erik,
      That’s a tutorial for a whole other day! But it is possible and many sites do this. In fact, rumor has it that there’s a method for using media queries to make the entire framework shift so that mobile sized users get a horizontal scrolling effect. I just haven’t found a working example yet.

  • greg

    I think it’s modeled after this?

    http://f6design.com/projects/parallax-scrolling/

  • Akram

    looks awesome – only thiing is how does it render on mobile?
    thanks for sharing!

    • Tara Hornor

      Eh, not so good with mobile yet, but the latest versions of jQuery degrade pretty well.

  • Amrit

    Nice tutorial.

    Does parallax support crawlable links for Googlebot and also functionality for Google Analytics?

    • Tara Hornor

      Amrit,
      Yes, because this is simply a layout trick, all the content is fully crawlable by Google and there should be no problem with GA tracking this as well.

      To get full GA support, you may want to tag any links within the page with tags. It would look something like this: somesite.com/index.html#link?utm=123…

  • Steve

    I agree with the other comments. Why put so much effort into writing this article and the code for it, but not bother to provide a demo?

  • Ridley

    Please link to a demo whenever offering a design tip of this nature.

  • Louis

    Great easy-to-follow tutorial!

  • http://www.arkett.com Lou Okell

    Great tutorial Tara – your step-by-step made it easy to follow. Couldn’t resist trying this out on my home page (www.arkett.com) and added a mobile compatible css. A bit goofy but definitely fun!

  • Chris

    Really awesome…Is this all open source and free to use commercially?

  • mike

    Do you know how to include a background picture into it?