ScrollMagic 神奇的滚动交互动画 jQuery 插件

发布于 2019-11-19 19:21:16 字数 3359 浏览 3392 评论 0

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

简介

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

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

特点

正如其名字一样,该 jQuery 元素滚动动画库出插件可以制作出各种神奇的滚动动画效果。ScrollMagic动画库的强大之处在于:

  • 滚动到某个位置开始动画
  • 滚动条滚动时同步动画
  • 固定元素在特定的滚动区域
  • 固定元素到有限的滚动进程中
  • 轻松添加视差效果到你的网站中
  • 创建一个滚动加载内容的视差效果页面
  • 在点击特定滚动位置或是任何滚动反应都可回调函数
  • 基于滚动位置执行动画-无论是触发一个动画或同步到滚动条的滚动。
  • 可以在指定的滚动位置开始一个元素的动画-无论是无限或有限的循环次数。
  • 基于滚动位置切换元素的CLASS样式。
  • 可以轻松的添加网页视觉差效果。
  • 可以创建无限滚动的瀑布流效果(通过AJAX调用添加新元素)。

ScrollMagic 动画库可以和其它js框架集成,插件中建议与Greensock Animation Platform (GSAP),GSAP的特点是性能稳定,功能丰富。也可以和轻量级的VelocityJS框架集成。

动画库特点

ScrollMagic元素滚动动画库的特点有:

  • 优化性能
  • 轻量级(压缩后只有6KB)
  • 灵活可扩展
  • 兼容移动手机设备
  • 强大的事件管理
  • 支持响应式网页设计
  • 面向对象的编程方式和链式编程方式
  • 代码可读性强
  • 支持两个方向的滚动(even different on one page)
  • 支持在div容器中滚动(一个页面可以支持多个div)
  • 完善的调试和日志记录功能

安装

ScrollMagic元素滚动动画库插件支持git、Bower、nmp和CDN。

git clone git://github.com/janpaepke/ScrollMagic.git
bower install scrollmagic
npm install scrollmagic
http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/ScrollMagic.min.js

使用方法

在页面中引入 ScrollMagic.js 文件,除了引入 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 src="js/scrollmagic/uncompressed/ScrollMagic.js"></script>

如果你使用的是 min 版本的 ScrollMagic 文件,记住 logging 功能在 min 版本的 JS 文件中已经被移除,要使用插件的可视化功能,引入 debug.addIndicators.js 文件。

<script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>

如果你使用 AMD,请查看这里。

基本使用方法

基本的ScrollMagic设计模式使用一个控制器,该控制器可以管理一个和多个场景。每一个场景用于定义当容器滚动到指定位置时发生的事件。

// init controller
var controller = new ScrollMagic.Controller();
 
// create a scene
new ScrollMagic.Scene({
        duration: 100,  // the scne should last for a scroll distance of 100px
        offset: 50      // start this scene after scrolling for 50px
    })
    .setPin("#my-sticky-element") // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller

要了解更多的 ScrollMagic 的 JS 代码结构,请查看这里。

浏览器兼容

ScrollMagic支持所有的现代浏览器,包括 Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文