当元素进入视图时动画元素 - jQuery CSS3 Animate It Plugin

版本:

浏览量:1254

最后更新：2021-09-07

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

CSS3 Animate 这是一个 jQuery 插件，它利用 CSS3 动画在 Html 元素进入视图时对其进行动画处理。

内置动画：

弹跳
褪色
生长
摇
旋转
罗林
摆动
摇摆
摇晃
脉冲
翻动

如何使用它：

1. 在您的网页的头部部分包含所需的 animations.css。

<link rel="stylesheet" href="css/animations.css">

2. 在网页末尾包含 JQuery javascript 库和 jQuery CSS3 动画插件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>

3. 将 CSS 类添加到您的 Html 元素，如下所示。

<h2 class="animated bounceIn">It Works!</h2>
<h2 class="animated bounceInDown">It Works!</h2>
...

4. 然后将它们包装到一个类为“animatedParent”的父元素中。您还可以通过data-OPTION父元素中的属性传递插件的选项。

<div class="animatedParent" data-sequence="1000'">
  <h2 class="animated bounceIn" data-id="1">It Works!</h2>
  <h2 class="animated bounceInDown" data-id="2">It Works!</h2>
  ...
</div>

5.所有选项。

data-sequence：如果你想让一组动画一个接一个地开始，那么你可以设置一个以毫秒为单位的序列时间
data-appear-top-offset：这将使动画在指定数量进入视口之前或之后开始。因此，如果您只想在用户滚动超过 300 像素后开始动画，那么设置 -300 像素的偏移量就可以实现这一点。
class="animatedParent animateOnce": Adding this will make sure the item only animates once and will not reset when it leaves the viewport.
class="animated bounceInDown slowest": Currently you can define 4 speeds, the default which requires nothing then slow, slower and slowest..