ScrollMe 基于 jQuery 滚动动画插件 - 文章教程

ScrollMe 基于 jQuery 滚动动画插件

发布于 2020-07-16 字数 3053 浏览 1385 评论 0

ScrollMe 是一个页面添加简单的滚动效果的 jQuery 插件,当你向下滚动页面时,ScrollMe 可以对页面元素进行轴标扫描、旋转、转换和改变不透明度,从而让整个页面动感起来。ScrollMe非常容易使用,它不需要写 JS 代码,只需在元素中写上属性就可以了,为什么只有这些属性?因为浏览器可以快速地为它们设置动画,使滚动保持平滑。

ScrollMe 基于 jQuery 滚动动画插件

不适合的使用场景

  • 给你的页面添加大量的滚动效果。你应该少用它,否则性能会受到影响。
  • ScrollMe 不是一个完整的框架,它只是为了添加一些额外的小东西。
  • 这些东西只能在支持相应 CSS 属性的浏览器中工作。

使用方法

先引入文件

<script src="js/jquery.js"></script>
<script src='js/jquery.scrollme.js'></script>

HTML 代码

ScrollMe 使用一个简单的声明性语法:只需包含 jQuery+ScrollMe,在 HTML 中添加一些属性,ScrollMe 将完成其余的工作。

  • 有两个类用于定义 ScrollMe 使用的元素:ScrollMe 和 animateme。
  • scrollme 类为动画元素定义了一个容器。动画的进度是基于滚动该元素的。
  • animateme 类定义动画元素。可以在容器元素中添加任意数量的这些元素。这些元素还采用描述动画发生方式和时间的选项。
  • 如果需要,scrollme 和 animateme 类都可以应用于同一个元素。
<div class="scrollme">
    <div
        class="animateme"
        data-when="enter"
        data-from="0.5"
        data-to="0"
        data-opacity="0"
        data-translatex="-200"
        data-rotatez="90"
    >
        Yup, that's all.
    </div>
</div>

可选参数

when

决定滚动的边界开始和结束,有三个参数:

  • enter 从容器的顶部进入视窗时退出
  • exit:从容器的底部进入视窗时退出
  • span:从容器的顶部进入视窗到底部进行视窗

from & to

指定在滚动边界内动画开始和结束的位置。动画属性设置为其默认值,直到 from 位置,然后在滚动到 to 位置时过渡到选项中定义的值。

需要注意的是,from 值可以大于 to 值。如果元素在进入视口时被设置动画,则通常会出现这种情况。

可选值:0 – 1

easing(可选)

设置要应用于动画的减缓功能。

  • easing:设置动画的形式
  • easeout:缓冲淡出
  • easein:缓冲淡入
  • easeinout:淡出
  • linear:无动画

crop(可选)

是否限制滚动边界在文档边界内。

可选值:true 和 false

opacity(可选)

元素的透明度,可选值:0 – 1

scale, scalex, scaley & scalez

指定元素的坐标 x y z 的数值实现滚动动画效果

rotatex, rotatey & rotatez

指定元素在 X Y 和 Z 轴的角度旋转数值。

可选值:旋转角度(度)

translatex, translatey & translatez

指定的距离把动画元素沿 X Y 和 Z 轴数值

可选值:距离(像素)

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3