初めに
Animate.cssとwow.jsを使って自身のサイト(tiwuofficial.github.io)にアニメーションをつけてみたので、使い方を簡単に書いていきたいと思います。
tiwuofficial.github.io
次回記事
Font-Awesomeを使ってサイトにアイコンを表示させる + Animate.css + wow.js
1.準備
Animate.css
Animate.cssは要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートです。
公式サイトではアニメーションの動きの確認ができます。
公式サイトからanimate.cssファイルをダウンロードしてください。
(animate.min.cssでも可)
wow.js
wow.jsはアニメーションのトリガー、アニメーションの詳細な動きを設定できるJavaScirptです。
GitHubからwow.jsファイルをダウンロードしてください。
(wow.min.jsでも可)
2.使い方
ファイルの読み込み
animate.cssとwow.jsを読み込みます。
<link rel="stylesheet" href="animate.css">
<script src="wow.js"></script>
href,srcのパスはよしなに変更してください。
wow.jsはinit()メソッドを呼ぶ必要があります。
<script>
new WOW().init();
</script>
利用方法
要素のclassに"wow アニメーション名"を指定することでスクロールが要素に達した時
指定したアニメーションが実行されます。
例
<div class="wow fadeIn"></div>
上記例ではスクロールが要素に達した時、フェードインされて要素内のコンテンツが表示されます。
アニメーションはAnimate.cssの公式サイトで確認できます。
公式サイトのセレクトボックス内のアニメーション名をクラスに指定することでアニメーションを実現できます。
wow.jsのオプション
次にwow.jsのオプションを利用しアニメーションの詳細を変更します。
| オプション | 意味 |
|---|---|
| data-wow-duration | アニメーションの時間 |
| data-wow-delay | スクロールが要素に達してからアニメーションがスタートする時間 |
| data-wow-offset | スクロールが要素に達してからアニメーションがスタートする距離 |
| data-wow-iteration | アニメーションの繰り返し回数 |
例
<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>
上記例の1行目では、スクロールが要素に達してから5秒後に2秒かけてアニメーションを実行します。
2行目では、スクロールが要素に達してからスクロール10を過ぎたらアニメーションを10回実行します。
最後に
Animata.cssとwow.jsの使い方をまとめてみました。
簡単でとても使いやすいと思います。