Looking at what designers and webmaster are achieving with today’s technologies gives me this fear that what I know today will be outdated tomorrow. In this rapidly changing world of the Web everything what happens here seems to be mirroring something else. Have you seen the new design introduced by MySpace? No? Take a look, it’s really an astonishing design [http://vimeo.com/50071857] which makes use of horizontal scrolling, but I have this feeling that I’ve seen this already. Wasn’t it Windows 8 Metro UI? Another concept that seems to be still very popular on the Web is called “parallax scrolling”. I admire those people who transformed this simple idea into some amazing websites and after few hours of experiments I have to admit it’s not easy. I’ve gathered some amazing libraries that will ease your work at build astonishing parallaxed project. But first things first.
WHAT IS PARALLAX?
Quoting Wikipedia (http://en.wikipedia.org/wiki/Parallax)
Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight
To experience this effect you don’t need anything special. Just look at an object with both of your eyes for second. Nothing special isn’t it? Thats because your eyes are placed in two different positions and your brain merges image from your left eye with image from the right eye into one image in your head. This sight shift allows you to see depth and 3D movies. Why bother going to IMAX. Now close one eye, and then another. Have you noticed that some object changed their position? This effect is called parallax.
As you’ve seen on your own, there’s nothing special about parallax though there is single parallax feature that web developers use. You have noticed that some objects those closer to you were moving more than those that were in the background. If you have played Angry Birds or Worms you probably saw that elements that are closer move faster than those in the background. Take a look at libraries that will allow you to create this effect on your website.
There are multiple ways to do parallax scrolling on your website. This library provides a way of scrolling through multiple section tags which have different backgrounds moving a little slower than the content. As author proposes combined with side-nav.js gives your website nice look & feel. All animations are done using CSS3 transformations but if your browser does not support those don’t worry cause it will gently switch to CSS positioning.
You will be amazed with that little jQuery plugin if your requirement is to move layers in response to mouse movement. The tricky part is that parallax effect is done by differentiating layer sizes making smaller layers move slower, and opposite. Simple and effective script with good documentation. Try it out, you won’t regret.
Stellar is another jQuery plugin that allows you to apply parallax effects on your brand new project. You won’t have problems using it cause all you need to do is to include stellar.js into your website and call $.stellar(); Interesting feature is the way the plugin is configured – and by all means the word “interesting” was used in the most positive way because stellar is configured by HTML5 data-* attribute.
Scrollr is much more that just parallax scrolling library and if your project has to react in response to scroll event Scrollr probably will be the best tool for you. A dozen of examples present quite good what this 3.4k (gzipped) library is capable of. Transforming animating page elements, drawing SVG path, background animation, snapping to “slides” it has all. It’s worth to mention that it was used by The Guardian. Squareup, Happy.is and it rocks. Oh, You will be glad hear that it supports Android and iPhone. Go and grab it.
If you want your users to have fun while scrolling those plugins are what youre looking for. I decided to place both in one section because they’ve got the same author and the other is on steroids. Scrollorama introduces many transitions in reaction to scrolling like fade in, rotate, zoom in etc, also allows you to apply parallax scrolling, pinning elements, applying easings and Superscrollorama add another set of features. No words can express how lovely it works.
Curtain is another jQuery plugin which allows you to “create a web page with multiple fixed panels that unroll with an amusing effect”. Bunch of settings, good documentation, a lot of live websites using it and what is more the author is working on second version.