1. Code
  2. Front-End

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.

If you're looking for a quick way to get started with a basic template for your theme, finding a simple Parallax Theme might be a good option. Or browse through our One Page Templates. You can also find service providers on Envato Studio who will create parallax scrolling sites for you.

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>.

Upon adding backgrounds for both sections, it should look like:


Let's add some more CSS to style and spice up the page!

Now it should look like this...


Step 2: The Magic Code

Yep, that's right; this is where the magic begins! Using jQuery, we'll begin with the standard document.ready() method to ensure that the page has loaded and is ready to be manipulated.

This technique revolves around controlling the speed of the background image that exists in both sections.

Now I need your attention here. The first thing happening below is that we're iterating over each <section> in the page, which has the atrribute data-type="background".

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

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

$window.scrollTop(): we are getting the current scroll value from the top. This basically determines how much the user has scrolled up. $'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 });.

Your final code might look like:

Yay, we've done it! Try it out for yourself.

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!

And if you're looking for a quick solution with professional results, then browse through our Parallax Theme and One Page Template options, available for purchase on ThemeForest.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.