神奇的jquery滚动交互插件ScrollMagic

神奇的jquery滚动交互插件ScrollMagic

ScrollMagic是一个神奇的jquery滚动交互插件,它让你可以像使用进度条一样使用滚动条。如果你想在特定的滚动位置开始一个动画,并且让动画同步滚动条的动作,或者把元素粘在一个特定的滚动位置,那么这款插件正是你需要的。

使用 ScrollMagic,您可以很容易地把视差效果添加到您的网站中。当用户到达某个滚动位置时,你可以调用函数,或以任何其他方式来和当前的滚动位置进行交互。

特点:

  • 滚动到某个位置开始动画

  • 滚动条滚动时同步动画

  • 固定元素在特定的滚动区域

  • 固定元素到有限的滚动进程中

  • 轻松添加视差效果到你的网站中

  • 创建一个滚动加载内容的视差效果页面

  • 在点击特定滚动位置或是任何滚动反应都可回调函数

使用方法

引入核心文件,除了引入jquery之外,还需确保加载了 Greensock Animation Plattform ,这是为了兼容各浏览。

<script type="text/javascript" src="js/_dependent/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="js/_dependent/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollmagic.min.js"></script>

写入JS初始化插件

// init controller
var controller = new ScrollMagic();

// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
.addTo(controller);

// add multiple scenes at once
var scene2;
controller.addScene([
scene, // add above defined scene
scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
new ScrollScene({offset: 20}) // add anonymous scene
]);

下载地址:本站下载 | 百度云 | 官方下载

Comments are closed.