Achieve an Extensible, Multilayered Scrolling Parallax Effect in Minutes
Here’s the final version of what you’ll be creating and the resource files for it:
Demo: Download (ZIP – 700k)
This Parallax effect was initially developed by Jonathan Nicol over at Pixel Acres/F6 Design. I couldn’t have put this together without his work and want to make sure to acknowledge his hard work.
The rest of this tutorial will focus on walking you through how to slowly build up this effect so that you can modify it to suite your specific needs. Too many other tutorials throw you right into the fray, leaving out a lot of the details that you’ll need for editing the design.
I like this Parallax version (and I tried dozens), because it has three independent layers that you can easily adjust. You can add text or use images easily, although this tutorial will use images as background, floating elements.
If you want to use your own images, make sure they are transparent PNG files. I have not tested the GIF format, and JPG files will not be transparent. Unless you are using perfect squares in your background images, you’re going to want the transparent PNG format.
So, hold on and have some fun as we scroll into the interesting rabbit hole of Parallax effects.
Step 1: Download Files
To get started, download the resources needed to complete the tutorial. You’re going to need four pre-built files:
- jQuery 1.6 – the jQuery engine that makes all things work
- Modernizr.js – a jQuery effect that gives us a nice smooth scrolling effect if navigation elements are clicked
- Parallax.js – the jQuery effect that makes the Parallax effect work
- Main.css – my CSS file
Other files include the images that I used for this tutorial that you will (hopefully) replace later. Download the full assembly of files using the link above.
Step 2: Head Content
Open up a new HTML document in your favorite HTML or text editor. You’re going to copy and paste the following code:
<title>Parallax Tutorial - Start Here</title>
<meta name="description" content="Parallax Tutorial" />
<link rel="stylesheet" media="all" href="css/main.css" />
Step 3: Adding Content
Now, we can start to add content to the HTML. This code goes between the <body> tags:
<!-- Page #1 -->
<p>This is a sample Parallax scrolling site with three pages. You can add all kinds of extra navigation elements on your own time, but I just wanted a simple, ready to rollout, vertical parallax system that I could easily implement and edit later.</p>
<a class="next page-number-2" href="#page-number-2">Next</a>
<!-- Page #2 -->
<p>Did you like that nice, smooth movement? Pretty slick, eh? You can either scroll or click on the navigation elements below. It's your decision. You're an adult. I'll leave that up to you. </p>
<a class="prev page-number-1" href="#page-number-1">Prev</a>
<a class="next page-number-3" href="#page-number-3">Next</a>
<!-- Page #3 -->
<p>You can add as many pages as you want, but it takes some work to get all the CSS, and JS working together. Just remember that each page you add needs to have this HTML, the CSS, and the parallax.js file updated with the new page. Don't worry, you'll be a pro before you know it!</p>
<a class="prev page-number-2" href="#page-number-2">Prev</a>
<a class="next page-number-4" href="#page-number-4">Next</a>
<!-- Page #4 -->
<p>Of course, there are all kinds of HTML and JS additions you can make. From navigation bars to the Lettering.js jQuery plugin, there's no limit. This parallax technique only relies upon the basic CSS and lightweight jQuery plugins to create the effect. Time for you tweak it and make it your own!</p>
<a class="prev page-number-3" href="#page-number-3">Prev</a>
Now, we need slow way down and look at what we’ve just done. There are a couple of predefined elements I’m using that we need to examine.
- Each page of your site will need to start with <article> to designate the content properly.
- The title section of each page is designated by the <header> tag. This is where the page will rest when scrolling after clicking one of the navigation buttons.
- <nav> is where to put the navigation links. You can create your own of course, but these are the pre-built versions.
To add a new page, you will have to edit three files:
- HTML document
- Add a new page that includes the <article> and unique ID – id=”page-number-5″, for example.
- Update the navigation element of the previous page to include your new page. Reference the ID name you gave it.
- CSS document
- Under the “content article” section, add your page ID to the list
- Add a new #page-number-5 tag (or whatever you called your page) under the “content article” tag. Make the position absolute and the height in increments of 1090 px – so page five will be height:4360px; as an example.
- Add a new function for the new page (don’t freak out! This is easier than it sounds!)
- Just copy and paste the “page-number-4” function and rename the ID inside it
Check out the finished version of this step in the “02-add-content.html” file from the downloadable resources.
Step 4: Adding Background Images
Below your content and above your closing </body> tag, add this code:
<img id="bg1-1" src="img/cloud1.png" alt="cloud"/>
<img id="bg1-2" src="img/cloud2.png" alt="cloud"/>
<img id="bg1-3" src="img/cloud1.png" alt="cloud"/>
<img id="bg1-4" src="img/cloud2.png" alt="cloud"/>
<img id="bg1-5" src="img/cloud1.png" alt="cloud"/>
This adds the images in the background or the “farthest” layer. In other words, these images move the least. You can individually position each image using the CSS document. Just open the CSS doc and search for “background image” and you will see how each is positioned.
To add a new image, you will need to duplicate and rename the a new CSS attribute for each image.
See the “03-background-images.html” file within the download for the finished step.
Step 5: Adding Midground Images
This is just like the previous step, so paste this code under the code for the background images:
<img id="mg2-1" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-2" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-3" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-4" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-5" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-6" src="img/cloud3.png" alt="cloud"/>
<img id="mg2-7" src="img/cloud3.png" alt="cloud"/>
Notice that I used the same image over and over again and I used several more than the background image. This is the beauty of this effect, as it allows you to reuse elements if you want or add lots of different images or text. Just make a new CSS attribute for each new image that you want to add and position it as needed.
You can edit the position of each element in the CSS file under the “midground image” section. See the final piece in the “04-midground-images.html” file within the download.
Step 6: Adding Foreground Images
You should be a champ at this by now. Same thing as Steps 5 and 6:
<img id="fg3-1" src="img/twitter.png" width="529" height="386" alt="Big freaking Twitter bird"/>
<img id="fg3-2" src="img/facebook.png" width="603" height="603" alt="Facebook in your face!"/>
<img id="fg3-3" src="img/linkedin.png" width="446" height="446" alt="LinkedIn logo"/>
<img id="fg3-4" src="img/landscape.png" width="1104" height="592" alt="Landscape foreground"/>
<img id="fg3-5" src="img/design-festival-logo.png" width="135" height="136" alt="Bluified Design Festival logo"/>
Once again, the position can be easily edited for these images in the CSS document under “foreground images”.
See the finished step in the file “05-foreground-image.html” with the files.
Step 7: Adding Navigation Elements (Optional)
I’m only adding this step because Johnathan Nicol did such a great job that I thought it was worth keeping his idea in this tutorial. You can place this code anywhere within the <body>, but I like to keep it at the top (but below the opening content div):
<a class="page-number-1" href="#page-number-1">View</a>
<a class="page-number-2" href="#page-number-2">View</a>
<a class="page-number-3" href="#page-number-3">View</a>
<a class="page-number-4" href="#page-number-4">View</a>
If you want more pages, it’s as easy as adding another <li> and your content. Make sure to update the anchor text properly and you’re all set.
The version with nav code is “06-navigation.html” in the resource files.
Adding impressive effects doesn’t have to take third-party browser plugins or a lot of expertise. You can create scrolling effects with standardized technologies and widely-used script libraries. After that, it’s up to the designer to add their own flair. I hope you liked the scrolling effect! Feel free to share your implementations (or other’s) in the comments.