Achieve an Extensible, Multilayered Scrolling Parallax Effect in Minutes


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:
  1. jQuery 1.6 — the jQuery engine that makes all things work
  2. Modernizr.js — a jQuery effect that gives us a nice smooth scrolling effect if navigation elements are clicked
  3. Parallax.js — the jQuery effect that makes the Parallax effect work
  4. 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:


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.
To add a new page, you will have to edit three files:
  • 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.
  • 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
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:

cloud
cloud
cloud
cloud
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:

cloud
cloud
cloud
cloud
cloud
cloud
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:

Big freaking Twitter bird
Facebook in your face!
LinkedIn logo
Landscape foreground
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 , 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
  • 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.

    Conclusion

    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.
    Achieve an Extensible, Multilayered Scrolling Parallax Effect in Minutes Achieve an Extensible, Multilayered Scrolling Parallax Effect in Minutes Reviewed by JohnBlogger on 1:53 PM Rating: 5

    No comments: