Full guide and demonstrations available at the [official Stellar.js project page](http://markdalgleish.com/projects/stellar.js/).

Stellar.js is a jQuery plugin that provides parallax scrolling effects to any scrolling element. The first step is to run `.stellar()` against the element:

This will look for any parallax backgrounds or elements within the specified element and reposition them when the element scrolls.

If you want elements to scroll at a different speed, add the following attribute to any element with a CSS position of absolute, relative or fixed:

If a ratio lower than 1 is causing the element to appear jittery, try setting its CSS position to fixed.

If you want an element's background image to reposition on scroll, simply add the following attribute:

As with parallax elements, the ratio is relative to the natural scroll speed. For ratios lower than 1, to avoid jittery scroll performance, set the element's CSS 'background-attachment' to fixed.

Stellar.js' most powerful feature is the way it aligns elements.

data-stellar-vertical-offset="150">

By default, offsets are relative to the element's offset parent. This mirrors the way an absolutely positioned element behaves when nested inside an element with a relative position.

By specifying the h2 element as the offset parent, we can ensure that the alignment of all the stars in a heading is based on the h2 and not the div further down the DOM tree.

You can define what it means for an element to 'scroll'. Whether it's the element's scroll position that's changing, its margins or its CSS3 'transform' position, you can define it using the 'scrollProperty' option:

Otherwise, you're ready to get started!

Below you will find a complete list of options and matching default values:

});

Out of the box, Stellar.js supports the following scroll properties:

'scroll', 'position', 'margin' and 'transform'.

});

Stellar.js has two methods for positioning elements built in: 'position' for modifying its top and left properties, and 'transform' for using CSS3 transforms.

});

* [Magic City](http://mc.starz.com)

* [François Hollande](http://www.parti-socialiste.fr/latimelineduchangement)

I'm sure there are heaps more. [Let me know if you'd like me to feature your site here.](http://twitter.com/markdalgleish)

Stellar.js uses [Grunt](http://gruntjs.com) and [PhantomJS](http://phantomjs.org/).

Make sure that all plugin changes are made in `src/jquery.stellar.js` (`/jquery.stellar.js` and `/jquery.stellar.min.js` are generated by Grunt), and that you successfully test and build the project with `grunt` before committing.

If you want to contribute in a way that changes the API, please file an issue before submitting a pull request so we can discuss how to appropriately integrate your ideas.

Contact me on GitHub or Twitter: [@markdalgleish](http://twitter.com/markdalgleish)

Copyright 2012, Mark Dalgleish

This content is released under the MIT license