What Is Parallax Scrolling
Parallax Scrolling was originally created for the video game industry as a “special effects” technique to give the audience an illusion of depth by moving the background slower than foreground. This technique has become a trend in web design to help draw the users attention to graphical elements that would normally be scrolled past by giving them movement. Parallax scrolling as a web design element can be used in a number of different ways to help complement your content and site’s goals. It is important to consider how this style will effect your sites structure and user experience, as this technique can easily become overwhelming and effect SEO. Below are some popular javascript libraries that are used to create the Parallax Scrolling effects. These libraries can help illustrate the different methods and styles for using this technique and can help you understand if this could be the right choice for your web project.
Parallax Examples
Plax is a jQuery plugin that makes it very easy to parallax elements in your site based on mouse position. You can see it implemented in many places throughout GitHub, like the 404 page and 500 page.
skrollr is a stand-alone parallax scrolling JavaScript library for mobile (Android, iOS, etc.) and desktop in just over 9.6k (minified) or 4.5k (minified + gzipped).
Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element.
InstaLax: Panel Based Parallax Framework.
ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
Make Your Own
Here is a tutorial outlining how you can make your own simple parallax effect with CSS and some JavaScript. This is ideal if you only need to have a simple effect in only a very few locations.
Examples of parallax style in action: 20 Best Websites with Parallax Scrolling of 2013.
Subscribe via RSS
