人靠衣装,机靠壳装

Revealator向下滚动时元素以动画形式展现插件

2018-06-05 17:23 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

Revealator向下滚动时元素以动画形式展现插件.jpg



Revearator是一个基于jQuery的插件,用于向进入窗口的元素添加效果。它简单易用。可以很方便的制作出元素进入视口时的各种淡入淡出、滑动、旋转等动画效果。它还根据用户在文档中的滚动位置将类添加到主体标记中。at-topat-bottomnear-topnear-bottom


在head之前
<link rel="stylesheet" href="fm.revealator.jquery.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="fm.revealator.jquery.js"></script>


使用示例:

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

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


备选方案(按实例分列):

您可以为插件设置这些全局选项。

// Sets the padding of the scroll position, if within this area, the classes `near-top`/`near-bottom` are added.<script type="text/javascript">
	Revealator.scroll_padding = '100';</script>// Sets the top and bottom offsets at which the effects are triggered.<script type="text/javascript">
	Revealator.effects_padding = '-100';</script>

Only show the effect once

通过添加类revealator-once,效果只会触发一次。插件将锁定到revealator-position-within.

Only show the effect on load
By adding the class revealator-load, the effect will only fire on load.

关于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毫秒


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

授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码