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

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

版本:

浏览量:171

最后更新:2021-09-07

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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..

Change log:

v0.2.1 (2014-07-05)

  • fixing css bug

  • adding in new on click events

v0.1.6 (2014-07-03)

  • adding new animations and fixing old ones

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。