アニメーションプラグイン-animate.css
2673 ワード
ダウンロードプラグイン:animateダウンロード
1.ページ導入カード
あなたのindexで.htmlページにこの2つのファイルを導入
2.jsコードを書く
jsに次の文を書きます.
3.htmlページにアニメーションを追加する
indexでhtmlページでアニメーション効果を追加するオブジェクトを見つけます.大きな内容の場合は、最も近くにある大きな箱を直接探して、箱にクラスを追加します.
bounceはアニメーション効果で、自分の必要に応じて効果を追加します.参考:animate.css各種アニメーション効果
属性:data-wow-duration="2 s"つまり、アニメーションは2秒で実行されます.Data-wow-delay="5 s"つまり、アニメーションは5秒遅れて実行されます.data-wow-offset="10"すなわち、可視領域からどのくらい離れてアニメーションを実行しますか.Data-wow-iteration="10"すなわち、繰り返し回数.
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"すなわち、繰り返し回数.