【63:WOW.js+Animate.css】WOW.js+Animate.cssで簡単にアニメーションを実装
プロジェクトNo.63: WOW.js+Animate.css - DEMO
画面表示されてら(スクロールで表示領域に入ったら)アニメーションが実行されるというライブラリです。
容量も軽量なので、ある程度決まった動きで実装を簡略化したい時とかに使えそうですね。
実装方法
まずはjsとcssを読み込みます。
HTML
<link rel="stylesheet" href="./css/animate.css"> <script src="./js/wow.js"></script>
WOW.jsを初期化(使える状態に)する
Javascript
<script>
new WOW().init();
</script>
アニメーションを適用したい要素にclass要素で「wow」を付加する
HTML
<img src="./images/bird.jpg" class="wow">
これで画面表示されたタイミングでアニメーションを実行するというトリガーが有効になります。
アニメーションの種類をanimation.cssから選ぶ
公式サイトにアニメーションのデモがあるので、好きなもの選んでclassに追加してください。
Redirecting to Animate.css
HTML
<img src="./images/bird.jpg" class="wow fadeIn">
オプション属性を付ける
以下の属性を付加して、細かい動きを調整します。
- data-wow-duration
アニメーションの持続時間(例:1.5s)
- data-wow-delay
アニメーションをスタートする時の遅延時間(例:1s)
- data-wow-offset
アニメーションをスタートする距離(ブラウザの下から)(例:20)
- data-wow-iteration
アニメーションが繰り返される数(例:3 または infinite)
<img src="./images/bird.jpg" class="wow bounce" data-wow-duration="2s" data-wow-iteration="infinite" data-wow-delay="300ms">