About
Parallax. Moves stuff on scroll.
A Note On Approaches
There are several ways to approach building a parallax effect on a site. Paul Lewis has a great overview on the popular techiniques 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 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).
Demo
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Prereqs
none.
Compatibility
- IE9+
- Firefox, Webkit, Opera
- no mobile
Code
parallax.init({
el: '.parallax'
});
Options
| Name | type | default | description |
|---|---|---|---|
| el | string | .parallax | selector of elements to parallax-ify |
| mode | integer | 1 | There are two different modes: Commence parallaxing items only when they appear within the viewport (mode 1, default) * Parallax items universally, irrespective of where they are on the page. (mode 0) |
| range | integer | 200 | The total distance (in px) to parallax an element. Only applies when parallax mode = 1 |
| data-parallax-speed | string | 0 | Data attribute on the element specifying the speed of parallax. Some examples: -1: translate up as fast as you scroll up (ie. moving upwards at 2x the scroll) 0: normal (ie. no translation) 1: translate down as fast as you scroll up (ie. "fixed" position) |
* note: if an element loads within the viewport, the engine will calculate the amount of parallax based on its position and adjust accordingly. Because of this, it may be a good idea to only fire the init() function after all assets (ie. images, etc) have loaded.