JS 流行库（十三）：ScrollMagic

JS 流行库（十三）：ScrollMagic

ScrollMagic 是一个专门用于实现滚动效果的插件，不仅可以把某些元素固定在一个特定的滚动位置，还可以使动画同步滚动条的动作，从而实现滚动视差效果，特点如下：

• 轻量级
• 可扩展
• 兼容移动端
• 响应式
• 链式编程

基本使用

1. 导入 ScrollMagic 库

<script src="./js/ScrollMagic.js"></script>

2. HTML

<style>
* {
     
     
    margin: 0;
    padding: 0;
}

header {
     
     
    width: 100%;
    height: 100px;
    background-color: black;
}

.section {
     
     
    width: 100%;
    height: 200px;
    background-color: red;
}

.section:nth-of-type(2) {
     
     
    background-color: orange;
}

.section:nth-of-type(3) {
     
     
    background-color: green;
}

.section:nth-of-type(4) {
     
     
    background-color: blue;
}

footer {
     
     
    width: 100%;
    height: 500px;
    background-color: black;
}
</style>
<header></header>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<footer></footer>

3. JavaScript

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene(