安装 ScrollMagic
在开始使用 ScrollMagic 之前，需要将其引入到项目中。你可以通过以下两种方式安装 ScrollMagic：
1. 通过 npm 安装
如果你使用 npm 进行包管理，可以通过以下命令安装 ScrollMagic：
npm install scrollmagic
2. 通过 CDN 引入
你也可以直接通过 CDN 引入 ScrollMagic，在你的 HTML 文件中添加以下代码：
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
基本概念
使用 ScrollMagic 时，需要了解以下几个核心概念：
- Controller：负责管理和协调所有的 Scene。
- Scene：代表一个滚动区域，其中定义了触发动画的元素及其行为。
- Tween：动画效果，可以通过 CSS 或 JavaScript 实现。
ScrollMagic 的基本用法
1. 初始化 ScrollMagic Controller
ScrollMagic 的使用通常从初始化 Controller 开始。Controller 是所有 Scene 的核心，负责监听滚动事件。
var controller = new ScrollMagic.Controller();
2. 创建 Scene
每个 Scene 代表一个动画效果，需要定义以下几个属性：
- triggerElement：触发动画的元素。
- triggerHook：触发点，取值范围为 0 到 1，0 表示视口顶部，1 表示视口底部。
- duration：动画持续时间，控制动画发生的区域。
3. 添加动画效果
ScrollMagic 提供了多种方式来创建动画效果。可以使用 setTween 方法实现简单的动画，或使用 CSS 类来应用预定义的样式。
示例代码
以下是一个完整的示例，展示如何使用 ScrollMagic 实现一个简单的滚动动画效果。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic 示例</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<style>
body {
height: 200vh; /* 页面高度，便于滚动 */
background: linear-gradient(to bottom, #fff, #f0f0f0);
}
.animate-box {
width: 100%;
height: 100px;
background: coral;
opacity: 0; /* 初始状态不可见 */
transform: translateY(50px); /* 初始位置向下偏移 */
}
</style>
</head>
<body>
<div class="animate-box" id="animateBox">滚动到这里时我会出现</div>
<script>
// 初始化 ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// 创建 Scene
var scene = new ScrollMagic.Scene({
triggerElement: "#animateBox", // 触发元素
triggerHook: 0.8, // 触发点（视口的80%位置）
duration: 300 // 动画持续时间
})
.setTween("#animateBox", 0.5, {opacity: 1, y: 0}) // 设置动画效果
.addIndicators({name: "动画"}) // 添加调试指示器（可选）
.addTo(controller); // 将 Scene 添加到 Controller
</script>
</body>
</html>
代码解析
-
HTML 和 CSS 部分：
- 创建一个
div元素作为动画对象，并设置其初始样式（如不透明度和位移），以使其在滚动之前不可见。 - 通过设置
height: 200vh增加页面的滚动高度，以便展示动画效果。
- 创建一个
-
JavaScript 部分：
- 初始化 ScrollMagic Controller，以管理滚动事件。
- 创建一个新的 Scene，指定触发元素和触发点。
- 使用
setTween方法定义动画，使元素在触发时逐渐变为可见并移动到原位置。
ScrollMagic 的常用功能
1. 触发点和持续时间
-
triggerHook：指定 Scene 的触发位置。它的值从 0 到 1，0 表示视口顶部，1 表示视口底部。例如，
triggerHook: 0.5表示在视口中间触发动画。 -
duration：指定动画的持续时间，以像素为单位。当滚动到达这个高度时，动画将结束。
2. 使用 CSS 动画
ScrollMagic 也支持通过 CSS 动画来实现复杂效果。可以使用 CSS3 动画，具体做法如下：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 1s forwards; /* 使用 CSS 动画 */
}
在 JavaScript 中，可以使用 setClassToggle 方法来添加类名触发 CSS 动画。
scene.setClassToggle("#animateBox", "fade-in");
3. 视差效果
通过创建多个 Scene，可以轻松实现视差效果。每个 Scene 可以有不同的触发条件和动画效果。以下是一个实现视差效果的示例：
// 创建第一个 Scene
var scene1 = new ScrollMagic.Scene({
triggerElement: "#section1",
triggerHook: 0.5,
duration: "100%"
})
.setTween("#background1", {y: "50%", ease: Linear.easeNone}) // 设置背景移动
.addTo(controller);
// 创建第二个 Scene
var scene2 = new ScrollMagic.Scene({
triggerElement: "#section2",
triggerHook: 0.5,
duration: "100%"
})
.setTween("#background2", {y: "30%", ease: Linear.easeNone}) // 设置第二个背景移动
.addTo(controller);
4. ScrollMagic 与其他库的结合
ScrollMagic 可以与其他动画库（如 GSAP）结合使用，提供更强大的动画效果。使用 GSAP 进行动画时，你可以这样做：
gsap.to("#animateBox", {duration: 1, rotation: 360}); // 旋转动画
然后在 ScrollMagic Scene 中使用 setTween 方法结合 GSAP 动画。
进阶用法
1. 添加指示器
在调试过程中，可以使用 ScrollMagic 提供的指示器来可视化 Scene 的触发位置和持续时间。只需在 Scene 中调用 addIndicators 方法：
scene.addIndicators({
name: "动画",
colorStart: "red",
colorEnd: "green",
colorTrigger: "blue"
});
这将为每个 Scene 添加指示器，便于调试和调整。
2. 使用回调函数
ScrollMagic 还支持在 Scene 触发时执行自定义回调函数。你可以使用 onEnter、onLeave 等事件来执行特定操作：
scene.on("enter", function () {
console.log("进入场景");
});
scene.on("leave", function () {
console.log("离开场景");
});
3. 管理多个 Scene
如果需要在页面中管理多个 Scene，可以将它们存储在数组中，便于管理和维护。以下是一个示例：
var scenes = [];
scenes.push(new ScrollMagic.Scene({/* Scene 配置 */}).addTo(controller));
scenes.push(new ScrollMagic.Scene({/* Scene 配置 */}).addTo(controller));
