Edited at

Animate.cssとwow.jsを使ってサイトにアニメーションをつける

More than 3 years have passed since last update.


初めに

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の使い方をまとめてみました。

簡単でとても使いやすいと思います。