ScrollMagic v1.3.0

神奇的 jQuery 滚动互动插件。

ScrollMagic is a jQuery plugin which essentially lets you use the scrollbar like a playback scrub control.
这是插件可以给你的，若你想要 ...

• ... 在特定的滚动位置启动动画.
• ... 动画同步到滚动条动作.
• ... 在特定的滚动位置固定元素（粘住元素）.
• ... 在有限的滚动进度量固定元素（粘元素）.
• ... 轻松的将视差效果添加到您的网站.
• ... 创建一个 inifinitely 滚动页面（使用 AJAX 附加内容）.
• ... 当用户点击某滚动位置或以任何其他方式与当前的滚动位置交互时调用函数.

退回到 演示页面, 浏览 示例 或阅读 文档 上手.

关于这个插件

ScrollMagic is a complete rewrite of its predecessor Superscrollorama by John Polacek.
Like Superscrollorama it relies on the Greensock Animation Platform (GSAP) to build animations, but was developed with specific regard to former shortcomings.

The major perks of using ScrollMagic include:

• optimized performance
• flexibility
• mobile compatibility
• event management
• ready for responsive webdesign
• object oriented programming and object chaining
• readable, centralized code and intuitive development
• 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
• detailed documentation
• many application examples

Is ScrollMagic the right plugin for you?
ScrollMagic takes an object oriented approach using a controller for each scroll container and multiple "scroll scenes" to define what should happen at what point in time. While this offers a great deal of control it might be a little confusing, especially if you're just starting out with javascript.
If the above points are not crucial for you and you are just looking for a simple solution to implement basic css animations I would strongly recommend taking a look at the awesome skrollr project. It almost solely relys on element attributes and thus requires minimal to no javascript knowledge.

安装

Aside from jQuery make sure you have loaded the Greensock Animation Plattform (TweenMax).
To use ScrollMagic in your project simply include the plugin js file in the head section of your HTML file:

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

For deployment use the minified version instead:

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

NOTE: The logging feature is removed in the minified version for obvious file size considerations.

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

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

You can remove the debugging extension for actual deployment.

用法

基本的 ScrollMagic 设计模式是一个控制器，它有好几个场景。
每个场景具有明确的开始和结束位置，并限定在容器中滚动到特定偏移会发生什么。

/*
    Basic workflow example
*/

// 初始化控制器
var controller = new ScrollMagic();

// 分配处理器"场景"，并将其添加到控制器
var scene = new ScrollScene({duration: 100})
                .setPin("#my-sticky-element") // 在一个 100px 的滚动距离内固定元素
                .addTo(controller); // 将场景添加到控制器

// 一次添加多个场景
var scene2 = new ScrollScene();
var scene3;
controller.addScene([
    scene2,
    scene3 = new ScrollScene({duration: 200}), // 添加场景并指派处理程序 "scene2"
    new ScrollScene({offset: 20}) // 添加匿名场景
]);

获取帮助

To get started check out the available learning resources in the wiki section.
Be sure to have a look at the examples to get source code pointers and make use of the documentation for a complete reference.

If you're having trouble using ScrollMagic please read the support guidelines.
Should you still be unable to figure it out, feel free to post your questions in the project's issues section.

浏览器支持

ScrollMagic aims to support all major browsers in recent versions:
Firefox 26+, Chrome 30+, Safari 6+, Opera 19+, IE 9+

关于作者

I am a freelance Art Director based in Lausanne, Switzerland.
I started this project to deepen my understanding of javascript (which it has).

Check out my website or Follow me on Twitter

许可协议

ScrollMagic is dual licensed under the MIT license and GPL.
For more information click here.
Click here to get more information on greensock licensing.