Revealator-制作元素进入视口产生动画的jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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