CodeinWP CodeinWP

Parallax Scrolling Scripts and Plugins

Parallax Scrolling Scripts and PluginsParallax 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.

23 Responses

  1. Beben Koben says:

    WOW
    thanks for lists master ☻

  2. Spinx Inc. says:

    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.

  3. Mirko says:

    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.
    http://www.netmagazine.com/tutorials/building-parallax-scrolling-storytelling-framework

  4. Omid says:

    VERY VERY Awesome and Amazing
    usefull
    Thank You ;)

  5. This plugin helps you trigger actions at certain scroll points:

    http://imakewebthings.com/jquery-waypoints/

    Might come in handy.

  6. This one:

    https://github.com/ishaba/plaxmove

    is used on the new WDD header:

    http://www.webdesignerdepot.com/

    Looks similar to “Plax” mentioned in the article.

  7. Anderson says:

    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!

  8. 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

  9. aaron says:

    I made this one:

    https://github.com/akiersky/jQuery-ScrollKey

    it treats the scrollbar like a playhead in a non-linear animation app like AE or Flash

  10. Luuk says:

    Hee Guys,

    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:

    http://justsaytheword.com/
    http://onward.fiskerautomotive.com/en-us

    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.

  11. Luis Muñoz says:

    Thank you Louis!
    Have anyone tried Adobe Muse?

  12. Hi everybody.

    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
    george@we-code-magic.com

    Manual: http://www.we-code-magic.com/software/isAlive/manual/#section-9
    Github: https://github.com/georgecheteles/jQuery.isAlive
    Other sites that use it:
    http://www.reea.net/ and http://www.reea.net/reeanimation

    Thanks

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).