注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

神奇的jquery滚动交互插件ScrollMagic

jQuery插件 fishcity 2927浏览

神奇的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
]);

转载请注明:jQ酷 » 神奇的jquery滚动交互插件ScrollMagic

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。