代码之家 › 专栏 › 技术社区 › Kaleem Nalband

使用WOW.js在视窗中的项目动画

wow.js animate.css animation css html

0

Kaleem Nalband · 技术社区 · 8 年前

我有一个包含在viewport中的项目列表,这意味着当我加载页面时,它们都会同时被设置动画。但我希望他们一个接一个地制作动画。

$(function(){
  new WOW().init();
})

这是我的钢笔 https://codepen.io/kaleem78/pen/oMEeqZ

如何在视区一个接一个?

1 回复 | 直到 8 年前

1

0

Chaska 8 年前

将延迟属性添加到标记:

<ul>
  <li class='wow fadeInDown' data-wow-delay="0.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="1s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="1.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="2s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="2.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="3s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="3.5s">Item</li>
</ul>