jQuery.Parallax-Scroller.js: Add a Parallax Effect to Lists

I recently discovered ActiveTheory.net website and fell in love with its design instantly. The design is new, unique and futuristic. What caught my attention most is the beautiful parallax effect when you scroll through a list of items creating a continuous flow. I think this is a pretty neat idea and so I decided to build a plugin that lets you do just that, but of course, without you having to do the hard work.

Introducing Parallax Scroller, a plugin that allows you to scroll through lists with a smooth parallax effect.

Note: This plugin has been tested Chrome, Firefox, Safari, on desktop and iOS. This has not been tested on IE. Due to an outstanding bug on Android, I was unable to track the touch event to create a parallax effect so you will not be able to see the effect on Android.

Adding a Parallax Effect to Lists with jQuery.Parallax-Scroller.js


Using Parallax-Scroller.js

How does this work?

To get this to work as expected, I had to loop through all the items in the list, apply the background source and position, and intercept the native scrolling behavior so I could use it to create a parallax effect.

As the user scrolls through the list, the plugin should also move the background of items that are visible. The reason to only apply to the ones that are visible is to prevent unnecessary overheads and images parallaxing out of bounds before the user even gets to see it. To do this I added another method that keeps track of where each item is, and only allows the parallax effect to run on the ones that are currently in the viewport/container.

The parallax effect is simple. I simply increased/decreased the background position as you scroll up/down. If the background is out of bounds, the parallax should stop immediately so that the viewer doesn’t see any white spaces.

After all this, I thought I was done with the plugin and as I was about to open source it, a little bug showed up. Turns out, the parallax effect doesn’t work on Android and after several hours trying to come up with a workaround, I found out that there is a bug on Android that doesn’t allow me to keep track of the touch event hence no parallax effect on Android. Thankfully, all the other parts of the plugin still work so I will need to come back and fix this when Google solves the touch event issue.

How-Tos

To use this plugin, first you have to include the latest jQuery library (preferably 2.0.0 or higher) available here, and then include jquery.parallax-scroller.js and parallax-scroller.css which can be found here, into your document’s <head>.

In your HTML file, simply follow the HTML markup shown below:

HTML

<body>
  ..
  <div class="list">
    <div class="list-item" data-ps-bg="images/1.jpg">
      ...
    </div>
    <div class="list-item" data-ps-bg="images/2.jpg">
      ...
    </div>
  ..
</body>

The data-ps-bg attribute must reflect the location of the image you want to use as the parallax background of that item. For example, if your image is in the images folder and is called "1.jpg", change the attribute to images/1.jpg.

Once you have your lay out perfect, it’s time to call the function and let the magic happen:

JS

$(".list").parallaxScroll({
   parallaxSpeed: 3,     
   tilt: false,             
   parallaxOnMobile: true,  
   startPosition: "0%",        
   retainNativeScroll: true    
 });

With the following options, your list will now have the basic parallax effect when scrolling. To play around with this plugin, here are options available for you to experiment:

  • parallaxSpeed: With this option, you can set how fast the background reacts to your scroll when parallaxing. Values can go from 1 - 10. The default value is 3
  • tilt: You can define how much you want the list to tilt (like you see on ActiveTheory.net) here. Values can be negative (tilt to the left) or positive (tilt to the right). For example: -1, -2, -3 will tilt the list items to the left or 1, 2, 3 will tilt the list items to the right. The default value is false.
  • parallaxOnMobile: This option will allow you to enable/disable the parallax effect when the website is being viewed on a touch device. This could be good for when you don’t want the performance to suffer on mobile devices. The default value is true.
  • startPosition: As with most backgrounds, sometimes, you want people to see the good stuff on your background, not the empty sky. With this option, you can manually set where you want the background to position on initial load. The option accepts percentages, so if you want your background to start off a little lower than usual, you can set this option to “20%” or “50%”. The default value is “0%”.
  • retainNativeScroll: By default, the plugin will listen to the scroll of the whole page but there maybe times when you want to have your list inside a container with its own scroll. This option will let you override the native scroll, and add the effect onto a scrollable container instead of the whole page. Simply toggle this to false, and div container "list" will be scrollable. The default value is true.

Conclusion

And there you have it, creating a super simple smooth parallax list within a few seconds with Paralax-Scroller.js. If you have any questions or suggestions regarding the plugin, please let me know in the comments below.