Parallax

Parallax. Moves stuff on scroll.

Introduction

There are several ways to approach building a parallax effect on a site. Paul Lewis has a great overview on the popular techniques and their pros and cons. In brief:

• absolute positioning: parallax is achieved via positioning elements absolutely (this technique also includes positioning a background image attachment). In general, this is the absolute worst way to do parallax from a performance point of view. Everything must be recalculated and re-painted on scroll, so avoid this if possible. The upside: you can support IE8 this way.
• 3D transforms: how the code herein operates. We offload elements in their own render layer to the GPU for X- or Y-transforms. Almost the most efficient (see below), but still very flexible and easy to implement. Browsers need to support transforms.
• canvas: one fixed element background (a canvas), that animates on scroll. Elements are placed into the canvas and moved about on scroll -- this is the most efficient, but difficult to implement (or impossible if you wish to use existing DOM elements).

Getting Started

Download the production version or the development version.

Include the relevant scripts in your web page, and then:

<script>
	window.onload = parallax.init({ el: '.parallax' });
</script>

Integration into your project

You'll notice that this (by default) adds a property to the Global namespace. This isn't necessarily a bad thing; rather, the onus is now on you to do what you wish with it.

If you're using a build script (ie. Grunt, Gulp), you can deglobalify and browserify, for example, and deal with the parallax object as you'd wish. See this article on Browserify for more info.

Documentation

Elements on the page can have different attributes, as referenced through particular data-atrributes. For example:

<div class="parallax item" data-parallax-speed="1"></div>

Support

• IE9+
• Safari / Chrome
• Firefox

Known Issues

Examples

Please see the demo directory

Release History

0.1

• initial commit