ScrollMe 基于 jQuery 滚动动画插件

Question

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

不适合的使用场景

• 给你的页面添加大量的滚动效果。你应该少用它，否则性能会受到影响。
• 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 轴数值

可选值：距离（像素）

相关链接

• 项目主页：https://plugins.jquery.com/scrollme/