ScrollMagic -岩石教程

特点

轻量级: gzipped 只有 6KB。
高性能: 优化的性能和响应速度。
灵活性和可扩展性: 基于插件的架构，易于定制和扩展。
移动设备兼容: 适用于各种屏幕尺寸和设备。
支持响应式设计: 能够适应不同的屏幕分辨率和方向。
详细的文档和示例: 提供丰富的文档和应用示例，便于开发者上手。
面向对象编程: 支持面向对象的编程模式，易于理解和维护。

使用场景

触发动画: 在页面滚动到特定位置时触发 CSS 动画或 JavaScript 动画。
固定元素: 将元素固定在页面的某个位置，创建粘性效果。
类名切换: 根据滚动位置切换元素的类名，实现样式变化。
复杂的滚动交互: 创建复杂的滚动交互效果，如视差滚动、滚动触发的动画场景等。

安装方式

你可以通过多种方式安装 ScrollMagic：

npm:
```
npm install scrollmagic
```
Bower:
```
bower install scrollmagic
```

CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>

使用示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ScrollMagic Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
</head>
<body>
  <div id="trigger"></div>
  <div id="animate">Animate me!</div>
  <script>
    // 初始化控制器
    var controller = new ScrollMagic.Controller();

    // 创建场景
    var scene = new ScrollMagic.Scene({
      triggerElement: '#trigger', // 触发动画的元素
      duration: 400, // 场景持续400px的滚动
      offset: 50 // 在滚动50px后触发
    })
    .setPin('#animate') // 固定动画元素
    .addTo(controller); // 将场景添加到控制器
  </script>
</body>
</html>

常用 API 介绍

Controller(): 创建一个 ScrollMagic 控制器。

var controller = new ScrollMagic.Controller();

Scene(): 创建一个新的场景。

var scene = new ScrollMagic.Scene({
  triggerElement: '#trigger', // 触发元素
  duration: 200, // 场景持续时间
  offset: 100 // 触发的偏移量
});

setPin(): 将元素固定在特定位置。
```
scene.setPin('#pin');
```
addTo(): 将场景添加到控制器。
```
scene.addTo(controller);
```
addIndicators(): 添加可视化指示器，用于调试。
```
scene.addIndicators();
```

高级用法

与 GSAP 动画库结合使用: ScrollMagic 可以与 GSAP 动画库结合使用，实现更复杂的动画效果。

var tween = TweenMax.to('#animate', 1, {rotation: 360});

var scene = new ScrollMagic.Scene({
  triggerElement: '#trigger'
})
.setTween(tween)
.addTo(controller);

官方资料

ScrollMagic 官方网站
ScrollMagic GitHub - Stars: 14.8k

ScrollMagic 是一个强大而灵活的工具，适用于需要创建复杂滚动交互效果的各种 Web 开发项目。如果你需要更多信息和实例，可以访问其官方文档和 GitHub 页面。