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

  • 116
    Like
  • 0
    Comment
More than 1 year has 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の使い方をまとめてみました。
簡単でとても使いやすいと思います。