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.
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.
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.
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.
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.
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)
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.”
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.”
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.
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.
thanks for lists master ☻
The examples of jQuery Scroll Parallax (http://www.davecranwell.com/content/jquery-scroll-parallax-plugin) are now fixed.
Thanks Dave, I’ve updated the post.
The listing below comprises of elegant Scripts and plugins which will assist in creating a fabulous web design with the Parallax patterns.
Thank you Louis Lazaris for introducing the best script and plugins.
I knew i saw Hobo Lobo of Hamelin website before, along with some kind of tutorial explaining how to build parallax websites.
It was an article from .net magazine, here is the link if anyone wants to read it.It is written by the guy who made the Hobo website.
VERY VERY Awesome and Amazing
Thank You ;)
Just found this one:
This plugin helps you trigger actions at certain scroll points:
Might come in handy.
is used on the new WDD header:
Looks similar to “Plax” mentioned in the article.
Love scrollorama! Its experimental and all, but for a portfolio its perfect for making a unique and interesting design. This whole list is great though, good finds!
I’ve my own work to add if I may?
Give jQuery Transe a chance. There are some super simple demos (no documentation yet) and it works even with touch devices. However, I’ve to say, that it is an early beta version, so be careful.
BTW: It has only 8.682 kb
This looks new:
I made this one:
it treats the scrollbar like a playhead in a non-linear animation app like AE or Flash
Thanks. Would be great if you could link to a demo too. Helps promote it. :)
I agree, A demo would clinch the deal !
Thanks for all these plugins and tutorials. I was wondering do you guys know of a script that when you scroll or use arrow keys you automatically go to the next section/div. These two sites have that, as an example:
I want to use this effect in my parallax site.
Thanks a million
I don’t know of any scripts that do exactly that. But that’s actually not a difficult thing to do. You just have to use JS to respond to the up/down arrows and also track the scrolling, sending the page automatically to the next ID’d div, and doing so with animated scrolling. In other words, that’s not really a “parallax” feature, it’s just an extra that some sites might include.
Well, I know that’s easier said than done, but that’s the gist of it. Again, I don’t recall seeing that built into any parallax script, but you might want to examine all the scripts mentioned in the article to see if one of them does that.
Here’s a new one:
Thank you Louis!
Have anyone tried Adobe Muse?
No I haven’t, sorry.
Here is a parallax library that uses JS animations as well as CSS3 ones, works in IE7+, is touch ready and is responsive. It can animate any property (even colors, transforms, box shadows, borders etc).
Please take a look and give feedback on
Other sites that use it:
http://www.reea.net/ and http://www.reea.net/reeanimation