アニメーションプラグイン-animate.css

2673 ワード

ダウンロードプラグイン:animateダウンロード
1.ページ導入カード
あなたのindexで.htmlページにこの2つのファイルを導入
<link rel="stylesheet" href="lib/animate/animate.css">
<script src="lib/animate/wow.min.js">script>

2.jsコードを書く
jsに次の文を書きます.
$(function(){
 //             
  new WOW().init();
});

3.htmlページにアニメーションを追加する
indexでhtmlページでアニメーション効果を追加するオブジェクトを見つけます.大きな内容の場合は、最も近くにある大きな箱を直接探して、箱にクラスを追加します.class="wow "、具体的には次のコードを参照してください.
bounceはアニメーション効果で、自分の必要に応じて効果を追加します.参考:animate.css各種アニメーション効果
<nav class="wow bounce"></nav><nav class="wow bounce" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></nav>

属性:data-wow-duration="2 s"つまり、アニメーションは2秒で実行されます.Data-wow-delay="5 s"つまり、アニメーションは5秒遅れて実行されます.data-wow-offset="10"すなわち、可視領域からどのくらい離れてアニメーションを実行しますか.Data-wow-iteration="10"すなわち、繰り返し回数.