ScrollMagic is an awesome jQuery animation JS library that allows you to do lots of cool stuffs when scrolling down/up your web & mobile page.
With jQuery ScrollMagic plugin, you can...
- 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 infinitely 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.
How to use it:
1. Include the jQuery javascript library and jQuery ScrollMagic plugin in the head section of the document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.scrollmagic.min.js"></script>
2. Include the required Greensock Animation Plattform's TweenMax.min.js script in the document.
<script type="text/javascript" src="js/_dependent/greensock/TweenMax.min.js"></script>
3. Initialize the plugin and do some stuffs in the javascript.
// init controller
var controller = new ScrollMagic();
// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
.addTo(controller);
// add multiple scenes at once
var scene2;
controller.add([
scene, // add above defined scene
scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
new ScrollScene({offset: 20}) // add anonymous scene
]);
Changelog:
v2.0.6 (2018-10-09)
- Bugfixes
v2.0.5 (2015-04-30)
- Fixed: a JS error occurred in IE9 see here
- Fixed: cascading pins of absolutely positioned elements didn't work see here
- Fixed: scene state wasn't correct at start position see here
- Fixed: updatePinState was called before scrollOffset update
v2.0.4 (2015-04-08)
- fixed JS error in IE9
v2.0.0 (2015-02-26)
- removal of all dependencies (jQuery & GSAP) – ScrollMagic is now stand-alone.
- new file structure
- new scene event: add fires when scene is added to a controller
- new scene event: remove fires when scene is removed from a controller
- option changes in Scene.addIndicators()
- several performance tweaks
- lots more info and warning messages (in the uncompressed development version)
v1.3.0 (2014-11-13)
- changed AMD loader behavior to export only one object -> {Controller: ScrollMagic, Scene: ScrollScene}
- added Error message for missing dependencies
- fixed bubbling of pseudo-resize event of div containers
- reference bug with AMD loading
v1.2.3 (2014-10-25)
- fixed: reference bug when using asynchronous loading
v1.2.2 (2014-10-21)
- fixed: Error message with wrong loading order
v1.2.0 (2014-10-16)
- AMD loader support
- added warning for tweens being overwritten
- better code for mobile clicks
- updated draw example to camel case to support Firefox
- updated parralax sections example to moving divs instead of background position
- added new references
- added favicon
- scroll momentum increased in Firefox over fixed elements
- parallax example was juggy in Firefox and Safari -> removed reliance of TweenMax ticker in favor of requestAnimationFrame
- bugfix for pinned elements jittering if inside a container, because of the delayed position update in refreshInterval
- bugfix: div resize event bubbled up to window
v1.1.2 (2014-09-16)
- fixed a bug with the scrollTo method
v1.1.1 (2014-09-04)
- Major update.
v1.0.9 (2014-08-19)
- added new feature `ScrollMagic.scrollTo()`
v1.0.8 (2014-05-27)
- Feature: add class for pinned element during pin
v1.0.7 (2014-04-15)
- feature: ScrollScene.startOffset
v1.0.6 (2014-04-05)
- fixed a bug concerning relative sizing of pinned elements
v1.0.5 (2014-03-24)
- updates.
This awesome jQuery plugin is developed by janpaepke. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 09.10.2018
- Source