Scatter Demos

Scatter is designed to be simple yet versatile. The demos provided in this section show how features can be used together and what can be achieved.

The demos use a mix of Scatter options with custom CSS and JavaScript to provide the different effects - this is the way Scatter is designed to work: as a solid core of functionality from which you pick and choose whatever is needed to create the effect you are after.

• Polaroids - all options default, using CSS to style items as polaroid photos with captions.
• Slides - shows grid mode, limiting rotation, and using next/prev navigation functions.
• Mobile - gives an example of how to detect swipe left/right to trigger navigation.
• Cards - shows random mode and overriding the transform style to flip cards.
• Stars - uses fixed mode with predefined positions to transition through constellations.

All of the demos are self-contained - none of them use any additional resources beyond scatter.js, and the entire demo code for each one is available by using View Source.

These demos are also included in the Scatter download available from the project home page.