A Simple Parallax Scrolling Technique

Parallax scrolling is an interesting technique, where, as you scroll, the background images translate slower than the content in the foreground, creating the illusion of 3D depth. As I planned to re-design my personal website, my first goal was to write the shortest and simplest code to achieve maximum awesomeness! I'll show you how I did it.

In this tutorial, I'll teach you the simplest parallax scrolling technique you've ever came across, so let's dig in!

Step 1: The Markup

This technique revolves around controlling the speed of background image. So let's begin with the HTML markup, creating two sections along with the required attributes: "data-type" and "data-speed". Don't worry; I'll explain these later.

I am using the <section> tag with the attributes data-type & data-speed, which were introduced in HTML5. This makes the HTML markup cleaner and easier to read.

According to the specification for Custom Data Attributes, any attribute that starts with data- will be treated as a storage area for private data. Additionally, this won't affect the layout or presentation.

Since all we need to do is control the speed of the background images, we'll use data-type="background" and data-speed="10" as key attributes to specify the necessary parameters.

I know what you're thinking: you're worried about IE. Never fear; I have a workaround for that too! We'll discuss it momentarily.

Next, let's add the content within the <article> tag inside each <section> .

What we're attempting to do here is making the <section> background scroll slower than its content, i.e <article>. This will help us create a parallax illusion. Before moving on to the jQuery magic, let's add the background images in our CSS for each <section>.

Add another function, .scroll(), inside .each(), which is invoked as the user begins scrolling.

$(window).scroll(function() {
});

We need to determine how much the user scrolled up, and then divide the value by the data-speed value, mentioned in the markup.

var yPos = -($window.scrollTop() / $bgobj.data('speed'));

$window.scrollTop(): we are getting the current scroll value from the top. This basically determines how much the user has scrolled up. $bgobj.data('speed') refers to the data-speed assigned in the markup, and yPos is the final value that we need to apply for scrolling. However, it will be a negative value, because we have to move the background in the opposite direction of the user's scroll.

Let's investigate a bit more with an example:

In the above image, data-speed is 10, and let's assume that the browser window has scrolled 57px. This means 57px divided by 10 = 5.7px.

The last thing that we need to do is put together our final background position into a variable. In order to keep the horizontal position of the background as static, we've assigned 50% as its xPosition. Then, we added yPos as the yPosition, and, finally, assigned the background coordinates to our <section> background: $bgobj.css({ backgroundPosition: coords });.

IE Fix

There's one last fix: older IE can't render the <section> and <article> tags. That's easy to fix, though; we'll use the standard solution of creating the elements, which makes the browser magically recognize the HTML5 tags.

Additionally, we need to use a basic CSS reset file in order to make all the browsers play nicely. Luckily, tools, like HTML5 Boilerplate take care of the brunt of the work for us, when it comes to cross-browser normalizing.

That does it for this lesson! Any questions or notes that you'd like to add? Let me know below!

I'm based in Karachi, Pakistan, working as a Senior User Experience Designer at Folio3. Technically, I'm focused on UI design for Web & Mobile apps, however, my life is incomplete without front-end development, specially on Dotnetnuke skins. Checkout my personal website to learn more about me. You can also follow me on Twitter. When I'm bored, I use to play piano.