Scatter Demos

Scatter is designed to be simple yet versatile. The demos provided here 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.