Parallax Scrolling: An Introduction

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.

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.
More articles by Scott Stanton

Picking up from where we left off, we need to start by creating some HTML to display the data we’ve stored in the $results variable. You can always modify this to suite your project. I’ll be using a table structure. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link href="styles/theme.css" rel="stylesheet"/> <title>PHP & MySQL</title>\ </head> <body> <div id="wrapper"> <table> <thead> <th>Title</th>...

In the first two parts of this series, we created the data layer that will hold the polling data and established methods for setting the variable values and reading from the database tables. In this part, we will build the methods that will write new polls and answers to the tables. The addPoll method adds a new record to the devdrive_polls table and returns a Boolean value that signals if the record was added successfully. function addPoll($aArgs) { // add a poll record $sql = "LOCK TABLES devdrive_polls...

A SQL injection is a common programming error the consequences of which can be really devastating. Many successful hacking attacks start when a hacker discovers a vulnerability that gives an opportunity to inject SQL code. When an SQL injection occurs, the structure of an SQL query is compromised and as a result you are left at the mercy of the potential hackers. If there is a vulnerability found, hackers can exploit it to gain access not only to your site and database but in extreme cases also to your corporate...

So far we've created some basic PHP pages and added some simple authentication. Today we're going to going to build on that by adding database support. This will allow us to add proper authentication to our application and start saving tasks. I should also note that I am currently writing PHP in-line and not using functions (or object orientated PHP) I will tidy this up in the next tutorial and spend more time explaining it and what it's benefits are. Last week ... Last week we installed XAMPP, so you should...

In our last session, we looked at the process of entering information on ad banners and ad clients, as well as generating ad activity reports. This week, we examine how to retrieve a random banner ad. We will also learn how to delete, activate and deactivate ads and clients. The getRandomAd() function retrieves a random ad by using the PHP rand() function. The function returns the ad’s primary key ID, client ID, title, URL and redirect path. The function also updates the activity table for this banner...

In our last PHP Ad Tracker lesson, we constructed the database tables for our ad banner application. Now we are ready to construct the data object that will hold the variables and functions that will display, add, edit and delete the data in those tables. Once we name all of the variables and functions, we will start applying the code to them. Variables: The data object class will hold two variables: one to hold the banner ad ID number from the ads table, and one to hold the database connection information....

In the previous lesson, we examined the basic functions of our banner ad tracking system, including the retrieval of records for both banner ads and advertisers. In this lesson, we will look at the functions responsible for generating reports and manipulating the data in the ads table and advertiser table. The getClientsList() function retrieves active client records and sorts them alphabetically by client name: function getClientsList() { // get clients from db $sql = "SELECT ad_client_id,...

Introduction ... I’m going to tell you a story, its about love, death and re-birth... Or something In the beginning there was a young html element called <table>. He had one purpose in life, to display data and life was good. But before long though he had been corrupted, his masters used him to define layout and structure. Things he was not originally designed to do, and so began the dark ages of web design. Then one day, there came a young knight called CSS, and with him he brought light to designers...

About

DeveloperDrive.com is a blog about web development from the makers of the popular web design blog WebdesignerDepot.com
Founded in 2011, we focus on the latest trends, tutorials, opinion articles as well as tips and tricks to empower our readers to become better web developers.