Configuring Everything

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

``` js

$.stellar({

// Set scrolling to be in either one or both directions

horizontalScrolling: true,

verticalScrolling: true,

// Set the global alignment offsets

horizontalOffset: 0,

verticalOffset: 0,

// Select which property is used to calculate scroll.

// Choose 'scroll', 'position', 'margin' or 'transform',

// or write your own 'scrollProperty' plugin.

scrollProperty: 'scroll',

// Select which property is used to position elements.

// Choose between 'position' or 'transform',

// or write your own 'positionProperty' plugin.

positionProperty: 'position',

// Enable or disable the two types of parallax

parallaxBackgrounds: true,

parallaxElements: true,

// Hide parallax elements that move outside the viewport

hideDistantElements: true,

// Set how often the viewport size is detected

viewportDetectionInterval: 1000,

// Customise how elements are shown and hidden

hideElement: function($elem) { $elem.hide(); },

showElement: function($elem) { $elem.show(); }

});

Demos

The best demonstration of parallax elements is on the [Stellar.js home page](http://markdalgleish.com/projects/stellar.js/). Other demos are listed below:

While the home page shows off parallax elements, Stellar.js also supports parallax backgrounds.

Mobile Safari halts code execution during scroll so you can't use normal scroll events to animate. By using an iOS scrolling library we're able to bypass this limitation. In order to use Scrollability, Stellar.js is run against the scrolling element and the 'scrollProperty' option is set to 'transform'.