Animate.css

【JS】Animate.cssとwow.jsでサイトにアニメーションをつけるのが脳死レベルで簡単だったので福岡一わかりやすく解説します

初めて表示された時やスクロールしてコンテンツが表示された時に、回転したり左右から現れるなどのアニメーションをサイトに付与してユーザの興味を引きたい場合があるかと思います。
そんなときに、Animate.cssとwow.jsを使うと要素にclassを与えるだけでサイトにアニメーションをつけるのが脳死レベルで簡単になります。

準備

Animate.css

Animate.cssは「bounce」「swing」「fadeIn」などいろいろな種類のCSS3アニメーションをclassに設定するだけで実装してくれます。動作デモも兼ねた公式サイトからCSSをダウンロードするかGitHubからダウンロードしてください。

wow.js

wow.jsはアニメーションの時間、繰り返し回数などが設定でき、jQuery不要で動作するスクリプトです。GitHubからwow.jsファイルをダウンロードしてください。

コーディング

初期設定

以下のコードのように、ダウンロードしてきた２つのファイルをhtmlファイルに読み込ませます。どの階層でも動作しますのでファイル階層は任意で設定してください。

<link rel="stylesheet" href="css/animate.min.css">
<script src="js/wow.js"></script>
<script>
    new WOW().init();
</script>

wow.jsは起動させるための初期設定が必要なので、init()メソッドを記述しておく必要があります。
スクリプトはbody閉じタグ前に記述でも動作します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

CDNで高速配信されるのでコチラの方が高速表示には向いているかもしれません。

使用方法

要素のclassに”wow アニメーション名”を記述(wowは必須)するだけで、スクロールが要素に達した時に記述したアニメーションが実行されます。アニメーションの種類は「animate.css」で実装されている、「bounce」「swing」「fadeIn」など、様々なアニメーションの中から好きなものを記述します。

<div class="wow fadeIn" data-wow-duration="2s">このdivがアニメーション動作します</div>

オプション設定

data-wow-duration アニメーションを継続させる時間
data-wow-delay スクロールが要素に到達時、アニメーションが指定した秒数後にスタート
data-wow-offset スクロールが要素に到達時、要素がアニメーションを開始する距離を指定。基準位置は画面端
data-wow-iteration アニメーションの繰り返し回数

さらに、アニメーションさせたい要素のclassに『infinite』を追加すると、無限にアニメーションを繰り返すことができます。

まとめ

wow.jsはAnimate.cssを必要としますが、Animate.cssは単体としても動作します。ですが、Animate.cssはCSSで時間や繰り返し処理を記述しなければならないので手間がかかってしまうのでwow.jsとコンビで使用することをおすすめします。なお、Animate.cssとwow.jsのコンビ技はスクロール上下し要素に達するたび、何回も動作するというものではないのでお気をつけください。

Related articles