Parallax Scrolling: An Introduction

Apr 2, 2012
CSS HTML
298 Shares
By

Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling.

Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol.  Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect.

Why am I talking about retro video games on a web development site?  Well, the simple answer could easily be because they’re awesome, but that’s not why.  Parallax scrolling is a cool design concept that is making its way in to the web design world.  Nike were one of the first to use this technique with great success when they hired marketing giants Weiden and  Kennedy to develop their original site for Nike Better World.  The Nike Better World site has since been updated and replaced with a new one, however there is another site that is quite similar, Activate sports drink.

You’ll notice as you scroll down the page that there are several different elements of the site that are all moving at different speeds.  Let’s take the page in our image above as an example.  As you scroll down through this page you’ve got blue dots in the far background that are slightly blurred, these appear to be moving at the same rate as the scroll bar.  You then have a grouping of blue dots that are more in focus and in the foreground that are moving slightly faster than the scrollbar.  Faster than those dots is the text, “0 SUGAR | 0 CALORIES | NATURALLY SWEETENED” as well as the main “Products” header for the page.  Finally there are images of the products themselves, smaller, more out of focus ones towards the background and larger, in focus ones in the foreground.  The background product images are moving at about the same speed as the text, while the foreground product images are moving faster than the text.  This is parallax scrolling at its best, various layers of images stacked on top of each other, all moving at different rates and giving a 2D visual a 3D effect.

Parallax scrolling is not solely restricted to things moving vertically, or in straight lines for that matter.  Leave it to Nintendo to be the ones providing us with an excellent example of this.  Flashing back to the early nays of original Nintendo, our characters typically moved horizontally across the screen from left to right and not vertically down our screen from top to bottom like we were when scrolling through the Activate site above.  Take a trip through MarkioKart Wii and let’s talk about some of the cool things going on here.

The first thing you’ll notice is like I just pointed out about the early days of Nintendo, the site scrolls horizontally across the screen and not vertically.  Sure, that’s cool, but it’s also not that new of a concept either.  You’ll notice the parallax effect with Yoshi and shells in the background, Mario and Luigi in the foreground and the main content all moving at different speeds.  But once you scroll between the highlights page and the attack page you’re no longer moving in a perfectly horizontal line any more.  Same goes for the transition from the rediscover and SNES pages.  The images not only maintain their different rates of horizontal movement, but now they change direction and go vertically as well.

It’s also worth noting that utilizing a parallax scrolling effect in your site does not have to limit you to a faux-3D effect.  German design firm Webseitenfactory is a testament to that as they utilize some parallax scrolling effects to help bring their site to life with various icons moving, growing, and shrinking as you scroll through their site.

Parallax scrolling can also help you spice up a site that doesn’t necessarily require all that much content.  What if all your site required was a mission statement, or about us section, and some contact info?  Chances are you could do that in a single page and given the right circumstances you may be able to make that single-page website look nice, but will it be memorable and stay in peoples minds?  Probably not.  But what if you just add some parallax scrolling to it, like the folks at Spring / Summer did?

My first impression was, “Oh, this site looks nice.”  But then once I began to scroll down it immediately became, “Whoa, this site is cool!”  Just adding a simple effect like that can mean all the difference between being complimented and being remembered.

Parallax scrolling is a nice trick to have up your sleeve.  Whether you’re looking to build a complex, multi-page website, or a simple single-page web presence, be sure to check back as I begin my tutorial on how to develop a parallax scrolling website.

Author: Scott Stanton
Scott Stanton has spent the past decade working nights as a freelance web designer, only to write about the latest design trends at his day job as a freelance writer. Hang on Scott's every word @TheScottStanton.
  • http://www.webdesignerdevelopers.com/ Web Development

    Good informative stuff shared , nice post defined thanks

    • tom hanks

      Yeah I think it a great way to design websites, especially which are related to design organisation. I really like it.

  • Allampatu

    Can’t wait for your tutorial!

  • WebBombs

    I also look forward to that. Seems like it could really pop some simple, minimalist sites and I love the idea of depth in such a 2D medium.

  • http://www.facebook.com/profile.php?id=100000475610668 José Serranito

    Looking forward for your tutorial, will it be compatible with the iPad?

  • http://www.smartenginetech.net Jose Luis Murgas

    I’m as crazy looking as to the effect of MarioKart Wii page, so not only move in straight lines, anyone know how?

    For a very good post! :)

  • Nicolas Embleton

    Honestly, only the MarioKart Wii and activate really are “readable” to me. The German page made me sick with the scrolling.
    Parralax is a fashion, but to really make it good, you need a LOT of fine tuning and effort.

  • Didem Kutlu

    I want some tutorial for parallax scrolling

  • http://ankurm.com/ Ankur Mhatre

    Tutorial Must !

  • Jellboi

    Eagerly waiting for the tutorial

  • http://www.facebook.com/Triqe Taarique Debidin

    WOW, just BEAUTIFUL, man! :D Great examples, perfect inspiration. I can’t wait to get started with parallax scrolling.

  • Patrick Ducat

    Great article but the G+ share link at the top isn’t working :-(

  • Matt

    man, i hate it when someone promises something and then reneges!!