这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > JavaScript > 正文
ScrollMagic 基于jQuery的魔法卷轴插件
2014年03月10日 JavaScript ⁄ 共 755字 等你评论

ScrollMagic是一个jQuery插件,它基本上可以让你使用像一个进度条的滚动条。

插件的功能:

  • 在特定的滚动位置启动动画。
  • 动画同步到滚动条移动。
  • 一个元素在一个特定的滚动位置(sticky elements)。
  • 有限的滚动进度(sticky elements)量元素。
  • 轻松的将视差效果添加到你的网站。
  • 创建inifinitely滚动页面(附加内容ajax加载)。
  • 调用函数当用户点击某个滚动位置,或以任何其他方式在当前滚动位置的反应。

安装:

<script type="text/javascript" src="js/jquery.scrollmagic.min.js"></script><--压缩版-->
开发版是:jquery.scrollmagic.js 调试版是:jquery.scrollmagic.debug.js

git源码:git clone https://github.com/highsea/ScrollMagic

使用:

// 初始化
var controller = new ScrollMagic();

// 处理场景,添加到控制器
var scene = new ScrollScene({duration: 100})
                .addTo(controller);

// 变化2:一次添加多个场景
var scene2;
controller.add([
    scene, // 添加默认的场景(1)
    scene2 = new ScrollScene({duration: 200}), // 添加场景并指定场景(2)
    new ScrollScene({offset: 20}) // 添加匿名场景(3)
]);

浏览器支持:

ScrollMagic只支持最新的,所有的主流浏览器:
Firefox浏览器的26 +,Chrome浏览器30 +,Safari浏览器6 +,Opera19 +,IE 9 +

ScrollMagic

友荐云推荐
×