wow.jsとAnimate.cssでスクロール連動アニメーション

今回は有名すぎるスクリプトでスクロール連動アニメーションを作ります。私も最初このスクロール連動でアニメーションをするサイトを見て頭の中が「？？？」となったものでしたが、意外と簡単に実装できますし、効果的に画像や文章を印象付けることができます。とにかくかっこいい、クールの一言です。

wow.jsとAnimate.css

Animate.cssというCSSライブラリをラップした、javascriptライブラリがwow.jsです。スクロールに合わせてアニメーションを行う仕組みです。この2つを組み合わせて使います。

Animate.css

Animate.cssは要素のclassにアニメーションを指定するだけで、簡単にアニメーションを実装することができるスタイルシートライブラリです。
公式サイトで動きを確認することができます。

wow.js

wow.jsはアニメーションのトリガー、アニメーションの詳細な動きを設定できるJavaScirptです。公式サイトの柴犬が超かわいい。
※公式サイトをスクロールしていくと表示されていますが、商用サイトで使う場合は有償となっています。商用サイトでこれと同じような効果を実装するには代替ライブラリが必要ですね…

実装してみよう！

実装方法は以下です。

wow.jsをダウンロード
wow.jsとAnimate.cssを読み込み
wow.js呼び出しの記述
マークアップ
その他

1.wow.jsをダウンロード

GitHubからダウンロードします。

ドロップダウンボタンをクリックして、をクリックします。

ZIPファイルを解凍して、動作に必要なファイルを抽出します。

wow.js は distフォルダに、animate.css はcss > libフォルダに格納されています。
この2つのファイルを使います。もちろん wow.js は wow.min.js を代わりに使ってもOKです。

2.wow.jsとAnimate.cssを読み込み

ここはサクッと行きましょう。それぞれのファイルをHTML内に読み込ませます。

<link rel="stylesheet" href="css/animate.css">
<script src="js/wow.js"></script>

1 2	<link rel="stylesheet" href="css/animate.css"> <script src="js/wow.js"></script>

それぞれ<head>内でも</body>直上に書いても問題なさそうです。

3.wow.jsを呼び出す

wow.jsを呼び出す記述を書いていきます。
これも<head>内でも</body>直上に書いてもOKなようです。

<script>
　　new WOW().init();
</script>

　　new WOW().init();

</script>

4.マークアップする

準備は整いました。マークアップしていきましょう。

まず、適用する要素に .wow を加えます。

<div class="wow">アニメーションさせるコンテンツ</div>

1	<div class="wow">アニメーションさせるコンテンツ</div>

次にAnimate.cssの効果を足していきます。

<div class="wow bounceInUp">アニメーションさせるコンテンツ</div >

1	<div class="wow bounceInUp">アニメーションさせるコンテンツ</div >

基本はこれで終わり、要素が表示された時にアニメーションがスタートします。
重ねての案内になってしまいますが、Animate.cssの動き方と対応するクラス名は公式サイトで確認することができます。いろいろ試してみてくださいね。

次は応用編、data属性を使ってアニメーションの始まるタイミングや持続時間を調整します。

<section class="wow fadeInDown" data-wow-duration="2s" data-wow-delay="5s"></section>
<section class="wow flipInY" data-wow-offset="10"  data-wow-iteration="10"></section>

1 2	<section class="wow fadeInDown" data-wow-duration="2s" data-wow-delay="5s"></section> <section class="wow flipInY" data-wow-offset="10" data-wow-iteration="10"></section>

それぞれのdata属性についての説明は以下です。

data-wow-duration
指定した秒数の間に表示していきます
data-wow-delay
スクロールによって要素に到達した後、指定した秒数だけ遅らせて表示を開始します
data-wow-offset
アニメーションを開始する距離を指定します。基準点は画面底辺です
data-wow-iteration
指定した回数分アニメーションを繰り返します

data-wow-offset がわかりづらいですね…スクロールしていくと最初に要素が現れるのが画面（ブラウザ）の一番下になりますよね…？
何も指定しない場合はそこからアニメーションが開始されるのですが、data-wow-offset を使用すると、始める位置を垂直方向にずらすことが可能です（正の数の場合は下にずれます）。
…もう少しうまい書き方があるといいのですが…

私もサンプルを作ってみたので、よかったら参考にしてみてくださいね。

See the Pen wow.js+Animate.css by necomacustom (@tamayura) on CodePen.27739

動かない場合はCodepenの右下に現れる「RERUN」をクリックしてみてください。

5.その他

レスポンシブデザインのサイトにwow.jsを用いた場合、スマートフォンではこのアニメーションを動かしたくないということもあると思います。その場合は

<script>
  new WOW({
    mobile: false
  }).init();
</script>

new WOW({

mobile: false

}).init();

</script>

先ほどのwow.jsの呼び出しに2行目の mobile: false を追加してください。

注意事項

先ほど、商用では有償ということを書きましたが、この他CDNで読み込む場合、あるいはAnimate.css公式サイトでファイルをダウンロードした場合において一部動作しないモーションがあるようです。これについては検証中です。

今回は以上です。お疲れ様でした！

2015年の冬、職業訓練を終える1ヶ月前に出来上がっていたポートフォリオに納得がいかなくて、いろいろな人のポートフォリオサイトを見ながら作り直していたのですが、スクロールするごとにアニメーションするサイトの仕組みが全然わからなくて修了した思い出からこれを書きました。
あの頃突き詰めて調べたり、実際に手を動かすことが足りていなかったのだなと現在では思うのですが、これからもさらに手を動かして「頭でわかる」ではなく「実際にできる」ことを増やしていきたいなと改めて思ったねこま（@necomacustom）でした。