00:23
I’ve been wanting to implement a Parallax effect for awhile, but I couldn’t find an “easy” technique anywhere. True to form, this tutorial isn’t easy for those who do not have any experience with modifying JavaScript or CSS. But this is as easy as it gets, and the steps I’ve broken this tutorial down into should be simple enough for even a novice to follow.
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
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:
Parallax Tutorial - Start Here
This won’t get you much, but it’s a critical start. In the head section of the HTML, we have the links to our files, so make sure you save this HTML file in the main folder with the CSS file in a sub-folder called “css” and the JavaScript in a folder called “js”, or this won’t work. Open up the “01-start-here.html” file from the download to double check your work.
Step 3: Adding Content
Now, we can start to add content to the HTML. This code goes between the tags:
Parallax Demo
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.
Wow!
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.
More stuff...
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!
Last page!
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!
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
to designate the content properly. - The title section of each page is designated by the
tag. This is where the page will rest when scrolling after clicking one of the navigation buttons.
- HTML document
- Add a new page that includes the
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.
- Add a new page that includes the
- 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.
- Parallax.js
- 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
Step 4: Adding Background Images
Below your content and above your closing </body> tag, add this code:
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:
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:
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 , but I like to keep it at the top (but below the opening content div):If you want more pages, it’s as easy as adding another
The version with nav code is “06-navigation.html” in the resource files.
No comments
Post a Comment