Parallax Scrolling Scripts and Plugins

Parallax scrolling sites have been a pretty hot UX thing of late, being showcased on various blogs. Although the “ooooh! aahhh!”-ness of it all has subsided, I think this type of site is certainly a legitimate design and development option for many brands.

To help you choose a JavaScript or jQuery library or plugin for doing this sort of thing (unless you’re a masochist and want to write one from scratch!), in this post I’ve put together a list of plugins and scripts to choose from.

---

Parallax-JS (by Razorfish)
Described as “Parallax page generator from simple HTML & CSS”. Animations are defined by adding custom CSS classes, and it also allows controls to be added dealing with pausing, speed, and more. Documentation isn’t too extensive, but it seems fairly simple to use.

View demo

---

Parallaxjs (by stolksdorf)
This one seemed to be one of the more popular ones, but the demo page has recently gone haywire. The description on GitHub says it allows you “to slide in pages of your site with having a parallaxing background”, doing this by adding “html elements, or pages, to Parallax.js and use the movement functions to slide them into view, pushing whatever was there out of the way.” Sounds pretty powerful.

View demo (like I said, broken, but maybe it will be back soon) | GitHub repo

---

Scrollorama (by John Polacek)
A jQuery plugin “for doing cool scrolly stuff”. Let’s you do some crazy transitions, zooms, rotations, etc. using any animatable CSS property that takes a numeric value. Also allows objects to be “pinned” and “unpinned” as the user scrolls, and the website (which is a great demo of the effects) has clear instructions on how to use it.

GitHub repo

---

Superscrollorama (by John Polacek)
Not to be outdone, the same developer has provided a similar plugin, this time with all sorts of extra effects including scaling, smushing, horizontal page slides, page wipes, bounces, flinging, and more.

GitHub repo

---

Plax (by Cameron McEfee)
This one is not a full-featured parallax website script, but is actually a plugin that let’s you do parallax effects based on mouse position, similar to what’s seen on GitHub’s 404 and 500 pages. So if you just want a simple parallax effect, or maybe if you want to combine a scrolling plugin with mouse movements, then this might work.

View demo | GitHub repo

---

Parallax-Scrolling (by Richard Shepherd)
This script is the code that goes along with the article Richard wrote for Smashing Magazine about the Nike Better World site (which has since been redesigned but still has some neat parallax stuff going on).

GitHub repo | A similar tutorial

---

Skrollr (by Alexander Prinzhorn)
For the vanilla JavaScripters out there, this solution is a “stand-alone parallax scrolling library with zero dependencies. No jQuery. Just plain JavaScript.” Animates using numeric CSS properties, allows easing, color changes, and all sorts of other effects.

View demo

---

jQuery Scroll Parallax Plugin (by Dave Cranwell)
“A jQuery plugin to make parallax effects based on the scroll position of the browser window.” The demo section includes a couple of websites that use the plugin (both horizontal scrolling), plus a few generic examples.

Usage instructions | Horizontal demo | Vertical demo

---

Stellar.js (by Mark Dalgleish)
This jQuery plugin claims to be “parallax scrolling made easy”, and it certainly looks that way. Just add some data attributes to the markup, and then run the plugin.

Project page | Demos (includes an iOS demo)

---

jParallax (by stephband)
This is another one that works with mouse movements, so again not exactly a “scrolling” plugin, but provides a related effect with mouse overs. The site says “jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.”

Project site | Demo pages

---

parallax (by Francesco Mari)
“Parallax is a jQuery plug-in that renders dynamic backgrounds scrolling with the rest of the page at different speed. Parallax can attach every number of images to the same element and each image can move at different speed.” There is a demo provided in the code repo, but nothing live to link to.

---

Parallaxer (by Stephen Murphy)
And here’s yet another parallax plugin that animates based on mouse movement. “Takes advantage of CSS3 3D transforms to create a real parallax effect. Responds to mouse movement. Device motion will be supported soon.”

A site that’s using it

---

Parallax Background Builder (by web-features.net)
Here’s an interesting tool that actually lets you build your code using a GUI-based system. Looks promising, but you’ll have to fiddle with it to get the hang of it. From what I can see, you don’t need to know any code at all to build something with this.

Documentation

---

Hobo Lobo of Hamelin
This last one is not a script, but the site itself is impressive enough to share here. It’s a horizontally scrolling site that tells a story. Viewing the source seems to suggest that this is a custom made solution that combines a few different jQuery plugins, rather than using a full-blown parallax scrolling library.

Got Any Others?

If you know of, or have written your own, parallax-based scripts or tools, let me know and I’ll add them to the end of this post.