简介

ScrollMagic 是一个轻量级的、可扩展的、兼容移动端的、响应式的、链式编程的专门用于实现滚动效果的插件，不仅可以把某些元素固定在一个特定的滚动位置，还可以使动画同步滚动条的动作，从而实现滚动视差效果。

使用

1.  引入 ScrollMagic.js 文件

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.  调用

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    offset: 100,
    duration: 200
});
scene.setPin(".section:nth-of-type(1)");
controller.addScene(scene);

如果通过 setPin 方法固定某个元素，默认情况下，场景元素下方将出现空白，且随着网页的滚动而被向下推压的场景元素覆盖，在添加场景元素时可以关闭此功能，此时场景元素下方不存在空白，示例如下：

let controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
    offset: 100,
    duration: 200
});
scene.setPin(".section:nth-of-type(1)", {
    pushFollowers: false
});
controller.addScene(scene);

相关链接

Github 地址 ：https://github.com/janpaepke/ScrollMagic