建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:21收藏

简介


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


JS响应式的滚动交互效果插件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