Adding some kind of graphical 3-D effect to a website is pretty neat if executed correctly and suits your site’s theme or content. But parallax scrolling has to be one of the more creative approaches to adding a third dimension and should add significant eye candy to just about any kind of website. A website with a typical parallax scrolling effect features a background that scrolls at a slower speed as you scroll the webpage down. While you could achieve this through pure Javascript or CSS, it is better to use a library for easier implementation on an existing project. Here are 3 libraries you should check out first.
Stellar.js should be the first library to check out for a number of reasons. First, the library’s homepage immediately shows a demo of the effect. Just scroll horizontally and you will not only notice the effect but also realize how amazing the effect can be when multiple background layers are involved. On top of that, there are more demos available and the implementation is not that difficult. The plugin is pretty customizable too and supports mobile devices.
Jarallax is a nice alternative if, for some reason, you do not want to use jQuery on your site. While the library is still in beta at the time of writing, Jarallax offers plenty of unique options that can be best witnessed in the demo area. There are also video tutorials that inexperienced coders can check out. It remains to be seen though if future updates will be provided.
Skrollr.js also does not rely on jQuery but it is more complicated featuring a pretty extensive documentation right on the library’s homepage. Fortunately, there are a number of creative examples that showcase the flexibility of this library so you can see if its complex nature is worth considering. The ability to have the browser draw something using SVG through scrolling is real cool.
Sweet post. Very helpful.
Neither Stellar.js nor Skrollr.js are maintained anymore. Bummer… You should probably update this article 🙂
Scrollmagic is the best for me 🙂
http://bluesatoshi.xyz