JS响应式的滚动交互效果插件ScrollMagic

简介

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) {ackground-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);

相关链接

官方文档 ：  http://constructs.stampede-design.com/2014/12/create-interactive-scrolling-websites-using-scrollmagic-js/

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

效果演示 ：  http://scrollmagic.io/examples/index.html