Revealator是一款可以制作元素进入视口产生动画的jQuery插件。它使用简单，可以很方便的制作出元素进入视口时的各种淡入淡出、滑动、旋转等动画效果。

使用方法

使用该图片画廊插件需要引入jQuery、fm.revealator.jquery.js和fm.revealator.jquery.css文件

 
<link rel="stylesheet" href="fm.revealator.jquery.css">           
<script src="js/jquery.min.js"></script>
<script src="js/fm.revealator.jquery.js"></script>
HTML结构

下面是一些示例的段落HTML结构。

<div class="revealator-zoomin">
    Some text or elements
</div>

<div class="revealator-fadein 
            revealator-slideup 
            revealator-delay2 
            revealator-duration5">
    Some text or elements
</div>
关于class类

与位置相关的class类。

class 描述
revealator-position-below 元素的顶部和底部都在窗口视图下面
revealator-position-partially-below 元素的顶部在窗口视图内，而元素的底部在窗口视图之外
revealator-position-within 元素在窗口视图之内
revealator-position-partially-above 元素的顶部在窗口视图之外，而元素的底部在窗口视图之内
revealator-position-above 元素的顶部和底部都在窗口视图上面

fm.revealator.jquery.css中有一些默认的class类。

效果类：

class 描述
revealator-fade 淡入淡出效果
revealator-rotateleft 轻微的向左旋转并淡入淡出显示
revealator-rotateright 轻微的向右旋转并淡入淡出显示
revealator-slideleft 从右向左滑动并淡入淡出显示
revealator-slideright 从左向右滑动并淡入淡出显示
revealator-slideup 下向上滑动并淡入淡出显示
revealator-zoomin 放大并淡入淡出显示
revealator-zoomout 缩小并淡入淡出显示

时间延迟类：

class 描述
revealator-delay1 设置效果延迟100毫秒
revealator-delay2 设置效果延迟1200毫秒
revealator-delay3 设置效果延迟300毫秒
...... ......
revealator-delay19 设置效果延迟1900毫秒
revealator-delay20 设置效果延迟2000毫秒

持续时间类：

class 描述
revealator-duration1 设置效果持续时间100毫秒
revealator-duration2 设置效果持续时间200毫秒
revealator-duration3 设置效果持续时间300毫秒
...... ......
revealator-duration19 设置效果持续时间1900毫秒
revealator-duration20 设置效果持续时间2000毫秒
自定义动画效果

你也可以自定义自己的动画效果，例如下面的代码自定义了一个向右倾斜的效果。

Stylus:

.revealator-skewright
    transform skew(35deg, 0deg)
    opacity 0
    transition all 600ms
    &.revealator-within
    &.revealator-partially-above
    &.revealator-above
        transform skew(0deg, 0deg)
        opacity 1

CSS:

.revealator-skewright {
    transform: skew(35deg, 0deg);
    opacity: 0;
    transition: all 600ms;
}
.revealator-skewright.revealator-within,
.revealator-skewright.revealator-partially-above,
.revealator-skewright.revealator-above {
    transform: skew(0deg, 0deg);
    opacity: 1;
}

Revealator插件的github地址为：https://github.com/FaroeMedia/revealator