ScrollMagic - magical scroll interactions

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
It's the plugin for you, if you want to:

• Start an animation at a specific scroll position.
• Synchronize an animation to the scrollbar movement.
• Pin an element at a specific scroll position (sticky elements).
• Pin an element for a limited amount of scroll progress (sticky elements).
• Easily add a parallax effect to your website.
• Create an inifinitely scrolling page (ajax load of additional content).
• Call functions when the user hits certain scroll positions or react in any other way to the current scroll position.

The major perks of using ScrollMagic include:

• optimized performance
• flexibility
• mobile compatibility
• ready for responsive webdesign
• object oriented programming and object chaining
• event management
• support for both scroll directions (even different on one page)
• support for scrolling inside div containers (even multiple on one page)
• extensive debugging and logging capabilities

1. INCLUDE JAVASCRIPT

<script type="text/javascript" src="js/jquery.scrollmagic.js"></script>

And to have access to the debugging extension during development, include this file additionally:

<script type="text/javascript" src="js/jquery.scrollmagic.debug.js"></script>

2. HTML

<div id="trigger1" class="spacer s0"></div>
<div id="pin1" class="box2 blue">
	<p>Stay where you are (at least for a while).</p>
</div>

3. JAVASCRIPT

// init controller
var controller = new ScrollMagic();

// build scene
var scene = new ScrollScene({triggerElement: "#trigger1", duration: 300})
	.setPin("#pin1")
	.addTo(controller);

// show indicators (requires debug extension)
scene.addIndicators();

4. EXAMPLES

Check out the examples  for full reference.