A Brief Introduction

In the ancient video game days, although you may have assumed you were actually moving a character around, you probably weren’t. Games like Sonic the Hedgehog and Mario World used a technique known as parallax scrolling. This is a method used to achieve a “movement” effect, when really all that is happening is the background is scrolling from right to left. Today, we’ll see how to achieve a similar effect using some clever positioning and some CSS3 transitions.

Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!

Step 1: The HTML

The HTML setup is extremely simple. It will consist of a wrapper, and a few divs to hold the different elements on our page. Our example today will be a pretty easy one. We’ll create the effect of a stick figure “flying” through the air. We’ll need 2 divs for the 2 sets of clouds in our scene, as well as a div to hold the stick figure. The HTML page should be setup like so:
Code Block
Ask a Question
Download Source
Index.html
It is extremely easy to use Visual Studio to build a new page.
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> Parallax Example </title>
    <link rel="Stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="clouds"></div>
    <div class="clouds2"></div>
    <div id="guy"></div>
</body>
</html>
Actually, that’s all the HTML that will be required in this project, as all of the real magic happens in the CSS file. Let’s take a look at that now:
Code Block
Ask a Question
Download Source
Style.css
the full style sheet
body 
{
    background-color: #a3e6fa;
}
#clouds
{
     background:url("clouds.png");
     background-position: 0px 0px;
     background-repeat: repeat-x;
     height: 300px;
     position: absolute;
      -webkit-transition: all 6s linear;
     width: 98%;    
}
.clouds2
{
    background:url("clouds2.png");
    background-repeat: repeat-x;
    height: 300px;
    position: absolute;
    top: 25px;
    left: -30px;
    -webkit-transition: all 6s linear;
    width: 98%;
    z-index: -1;
}
#guy
{
    background:url("flying-guy.png");
    bottom: 10px;
    height: 300px;
    position: absolute;
    -webkit-transition: all 6s linear;
    width: 200px;    
}
#guy:hover
{
    border: 1px dashed;
    -webkit-transform: translate(600px,-600px) rotate(90deg);  
}
body:hover #clouds
{
    -webkit-transform:translate(-150px);    
}
Ok, there’s a lot going on here so I’ll be breaking each declaration down for you step by step. Let’s start with the first one, the body declaration. The only thing we’ve done to the body is added a nice, sky-blue background color to set off our scene nicely.
The next declaration is the #clouds declaration. The first thing we’ve done is set the background image to our clouds.png file. We then positioned the clouds at the top-left corner of the div using the background-position property. Next, we make sure that the background repeats using the background-repeat property. We then added a height definition to get some dimensional constraint. Then, we set the position to absolute to allow for positioning within the #cloud div and added a 6 second linear transition to the clouds.
Moving down the line we come to our .clouds2 class. This class of clouds sits behind the #clouds div, and is positioned slightly lower. The main difference in this declaration is that we’ve given it a z-index property of -1. Remember I said it sits behind the #cloud div? Well, z-index is how we make that happen. The #cloud div has a default z-index of 0, and the lower the z-index the “further back” into a page an element will fall. This will allow our main clouds to overlap our other ones. 
Next up is the #guy div. There’s not much going on at all here, but we’ve given the div a background image, positioned it absolutely near the bottom, and added a 6 second linear transition to him. We added the width and height, again, just to have some dimensional constraints.
The next two declarations are the most important ones, and we’ll take a look at them again to reinforce that. Here they are:
Code Block
Ask a Question
Download Source
Style.css
#guy:hover, body:hover #clouds
#guy:hover
{
    border: 1px dashed;
    -webkit-transform: translate(600px,-600px) rotate(90deg);  
}
body:hover #clouds
{
    -webkit-transform:translate(-150px);    
}
The first one is the #guy:hover declaration. The code here calls a transformation of the “guy” when we hover over him. The first transformation value is translate. Translate takes the position of an element, and moves it to the x and y location that you pass into it. In our case, we’re moving the guy on the x-axis 600 pixels, and taking away 600 pixels from the y value. This will cause him to “fly” to the right of the screen and up. We also passed in a rotation of 90 degrees as well so our guy will lay horizontally when he’s “flying”.
Last but not least is the body:hover #clouds declaration. What we have here is yet another transform translate property. This moves the clouds from the left to the right by 150 pixels when we hover over the body of the clouds. Now, when you load the page in the browser and hover over the guy, you’ll see quite the awesome effect. Although it appears that the guy is flying, he’s not. The clouds are moving behind him, giving the effect of flying. Congratulations! You’ve created your first (super simple) parallax effect in CSS3.

A Few Last Words

This tutorial has been brought to you in full effect by the marvelous CSS3. Any attempt to recreate this effect in other technologies is futile and unnecessary. No, not really. But using CSS can really speed up your site if you’re doing a similar thing in JavaScript or Flash. Keeping things compact and simple is what CSS3 is all about when it comes to the likes of animations and things. Join us next time for another awesome CSS3 project. See you then!

We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

download source files