视口中带有 WOW.js 的项目的动画
Animation of items with WOW.js which are in the viewport
我有一个包含在视口中的项目列表,这意味着当我加载页面时,它们都会同时全部动画化。但我希望他们一个接一个地制作动画。
$(function(){
new WOW().init();
})
这是我的笔
https://codepen.io/kaleem78/pen/oMEeqZ
如何使视口中的项目一个接一个地动画化?
为您的标签添加延迟属性:
<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>
我有一个包含在视口中的项目列表,这意味着当我加载页面时,它们都会同时全部动画化。但我希望他们一个接一个地制作动画。
$(function(){
new WOW().init();
})
这是我的笔 https://codepen.io/kaleem78/pen/oMEeqZ
如何使视口中的项目一个接一个地动画化?
为您的标签添加延迟属性:
<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>