scrollmagic
如果您迫切希望在下一个项目中生成漂亮的滚动动画，则别无所求。 ScrollMagic是一个JavaScript库，可帮助您创建“神奇的”滚动交互，从而轻松响应用户的当前滚动位置并触发动画或同步事件。
ScrollMagic最近进行了一些大的更改，因此这里快速浏览了自诞生以来的更改和改进。
什么是新的？
曾经是ScrollMagic核心组件的依赖项（例如GreenSock（GSAP）和jQuery）已从库中完全删除。 从2.0.0版本开始， 在 ScrollMagic 之上添加功能的所有内容都被视为插件，最终使ScrollMagic成为一个独立的库（压缩了6KB）！
如果您选择更深入地研究， 变更日志还包含许多其他已调整的方面。 如果您没有时间，以下是突出显示一些更改的列表：
- 删除依赖关系并引入插件
- 现在使用
ScrollMagic.Controller()实例化控制器 - 现在将场景定义为
ScrollMagic.Scene() - 删除
triggerOffset - 删除
pinClass（这可以通过2.0中的setClassToggle实现） -
pushfollowers默认值设置为false - 新事件：
add和remove - 更名
.parent到.controller - 调试扩展名已重命名为
plugins/scene.addIndicators，可以在控制器之前添加，即使删除并重新添加场景也可以使用。 - 新方法
removeIndicators
性能调整
Paul Irish在更新RAF（ 请求动画帧 ）方面提出了提高ScrollMagic速度的性能调整。 最初不使用直接监听滚动事件的方法，而是使用一种称为“反跳”的技术。 这意味着应该在Scroll上执行的所有操作实际上都是在超时（延迟）中执行的。 触发onScroll ，唯一更改的是变量，例如wasScrolled = true并在超时功能中进行了检查。 最初，在RAF上调用了wasScrolled函数，并不断在循环中寻找wasScrolled var。
现在，代替循环，它只是安排在触发滚动事件时检查下一个RAF。 所有这些意味着，当没有滚动发生时，就不会运行循环！
响应时间
除了提高性能外，响应时间也必须是我最喜欢的库改进之一。 Scene持续时间现在可以接受百分比字符串，例如"100%" 。 将根据卷轴容器的大小计算卷轴。 ScrollMagic将在垂直滚动系统中使用容器的高度，在水平滚动容器中使用容器的宽度。
var scene = new ScrollMagic.Scene({
duration: "100%"
});脚本加载
现在的脚本顺序已经有了很大的不同，因为像GSAP这样的库已被分离，而不是作为ScrollMagic核心的一部分。 这意味着，只要您想要TweenMax之类的库，就需要先加载主GSAP库，然后加载核心ScrollMagic库，然后再加载您选择的ScrollMagic插件。
请记住，始终始终先加载主GSAP库， 然后再加载ScrollMagic插件。
<script src="TweenMax.min.js"></script>
<script src="ScrollMagic.min.js"></script>
<script src="plugins/animation.gsap.js"></script>GSAP插件的脚本调用是ScrollMagic的新插件，其中包含以前集成到ScrollMagic中的GSAP补间功能。 Jan还为不需要GSAP提供的功能的人集成了velocity.js 。
定义控制器
控制器是一种“控制场景”的方法。 这个类每个滚动容器需要一次，并且在2.0中的编写略有不同。
让我们比较一下现在实例化控制器的方式，以及它们在旧版本中的情况：
旧方法
var controller = new ScrollMagic();新方法
var controller = new ScrollMagic.Controller();场景
场景是运动/动画的位置。 它定义了控制器应该在哪里React以及如何React。 这也是语法稍有变化的另一个示例。
旧方法
var scene = new ScrollScene({
triggerElement: "#pinned-trigger",
duration: $(window).height() - 100,
triggerHook: 0,
reverse: true
})
.setPin("#pinned-element")
.addTo(controller);新方法
var scene = new ScrollMagic.Scene({
triggerElement: "#pinned-trigger",
duration: $(window).height() - 100,
triggerHook: 0,
reverse: true
})
.setPin("#pinned-element")
.addTo(controller);更新提示
与ScrollMagic的创建者Jan Paepke交谈时 ，我学到了一个很棒的省时技巧，可以帮助您从旧的ScrollMagic代码迁移到新的
- 首先在文本编辑器中对“
ScrollMagic”执行“搜索并替换”，SM_TMP在所有文件中将字符串替换为“SM_TMP”。 - 接下来，将“
ScrollScene”替换为“ScrollMagic.Scene”。 - 最后，将“
SM_TMP”替换为“ScrollMagic.Controller”。
注意 ：请确保您没有在搜索中包括ScrollMagic的源文件-仅将其应用于您自己的代码。 这是一个额外的步骤，但是更加安全，因为在某些情况下，括号前可能会有空格。
文献资料
如果您需要有关ScrollMagic的指导，则可以查看我的ScrollMagic存储库的WIKI部分使用的CodePen集合 。 WIKI也有很好的解释，以及ScrollMagic官方网站的示例部分中提供的演示：
现在，为您的项目制作出色的滚动动画！
翻译自: https://webdesign.tutsplus.com/tutorials/introducing-scrollmagic-20--cms-23726
scrollmagic