How To Easily Create jQuery Parallax Script


I recently had to work on creating a simple parallax function for some background images on a full-width page. I had seen the parallax at work at sites like Nike’s Better World (which doesn’t seem to be there anymore) and thought it would be way too over the top to implement on any site I’d be a part of, however, with improving technology and forms of parallax becoming more renowned people are expecting to see a little of its magic on websites these days.

(I think it’s increase in awareness may also have boomed with the iOS7 update – for those who have images placed into their phone’s background.)

Anyway, thankfully inserting Parallax code into an existing site isn’t too difficult. I’m appreciative of the crew over at NetTuts with sharing some simple Parallax code as all I did was refactor this so that it didn’t really rely on the data attributes.

So to use my code simply:

  1. Create a div with a class tag for whatever you want to use for your Parallax images on your site
  2. Change the name of the class’ code I have from .CLASS-OF-PARALLAX-IMAGE-HERE to whatever you have inserted into your HTML
  3. Set your div’s CSS height property
  4. …and that’s it!

The script will Parallax the image from top to bottom as you scroll through the window’s viewport. If you want the Parallax to be less intense when you scroll make the div height bigger, if you want the Parallax effect to be more intense make the div height smaller… you get the picture.

The code will similarly work for multiple images containing the same class tag and will also ensure images that appear near the end of the document go from 0% to 100% even though the window viewport has not scrolled to the end of the image.

Anyway, thanks again to Mohiuddin Parekh for the awesome tutorial which helped me to get started, and here’s my resulting code:

[gist]7153627[/gist]

Recent Posts