We have gotten quite a few emails from people asking how we did the parallax effect on the new design. We are not master of Javascript but we always like to learn and explore new things. That was the case of the parallax effect. This kind of effect brings us back memories from the 8 and 16 bit video-game eras and it was a really good exercise to improve our web design skills.

So for this tutorial we will show you how we did the parallax effect you see in the blog. The first thing to do is try to get familiarize with HTML/CSS and Javascript. It's also important to understand the behavior of the objects you will try to animate. For the parallax the logic is that two or more elements move in a different speed to give a sense of depth.

Step 1

Open your HTML editor or text editor. I am using Espresso for this tutorial, but that is not really important. After that create a new document and make sure you save it as .html.

Let's write a basic HTML 5 file. Use the image below for reference.

Easy Parallax Effect with jQuery

Step 2

Let's now make sure we add our jQuery library link within the <head> tag. You can simply link straight to the jQuery website or Google code.

Easy Parallax Effect with jQuery

Step 3

Another nice thing to do is to use custom fonts that are not the limited websafe ones. I am using Google Web Fonts for that. The font I will use for this tutorial is Oxygen.

Easy Parallax Effect with jQuery

Step 4

For this tutorial we will create a basic card with an image and some information. The idea is that the image will scroll slower than the content that will scroll on top of the image. Basically we will have:

  • Create a <section> tag for the card;
  • Add a <img> tag with the link to the image you want to use.
  • Add a <div> after the <img>. This <div> will be the info about the image, in our case the movie Hobbit.
  • Add some info about the video. We use IMDB to get that http://www.imdb.com/title/tt0903624/

Your HTML will look like the image below.

Easy Parallax Effect with jQuery

Step 5

Save and preview it in the browser. As you can see, it's a raw html page.

Easy Parallax Effect with jQuery

Step 6

Time to add some style. Starting with the "body" tag. Lets remove the padding and margin, let's also use the custon font and a background from Subtlepatterns.

Easy Parallax Effect with jQuery

Step 7

Now let's work on the card. For the #box (the ID added to the <section>) add the width, height, margin, background and use relative for the position. To make the card scrollable use "overflow:scroll". For the image, use position:absolute. Another important thing to do is to set the background color for the <div> with the info. This <div> will scroll on top of the image.

Easy Parallax Effect with jQuery

Step 8

Here is a preview of the HTML with styles.

Easy Parallax Effect with jQuery

Step 9

Time to make the Parallax work. Let's use jQuery to get the scrolling event. To do that we just need to use $("element").scroll(callback), in our case $("#box").scroll(function(){});

Easy Parallax Effect with jQuery

Step 10

Now let's get the value of the scroll, use .scrollTop(). For more information about jQuery you can use http://visualjquery.com/ - so here will will get the value of the scroll of the card and assign it to a variable call "s"

Easy Parallax Effect with jQuery

Step 11

To make the parallax work is pretty simple, we will divide the value of the scroll by 3 and use CSS to move the image. For this tutorial I used -webkit-transform: translateY. It only works on Webkit browsers. For full production you will have to create a version for each browser if you decide to use the transform. You could also use "top", but it wouldn't work really well on mobile.

Easy Parallax Effect with jQuery

Conclusion & Demo

Everytime you scroll the image will move a third of the distance of the rest of the content. That is what we used for the blog, however for mobile you will have to use other event handlers, especially for iOS that doesnt have the "scroll" event. You can see the demo below or clicking here.

About the author of this post

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there, with a special selection of Photoshop Tutorials and Illustrator Tutorials. Of course there are other softwares conteplated like Pixelmator, Fireworks, and web design tutorials.