Kurotei Databook

高専でデザインを専攻してる人のwebやデザインの備忘録的なもの。

wow.jsでスクロールに合わせてアニメーション(animate.css)をするメモ

前回animate.css(cssだけでカッチョイイアニメーションをさせるAnimate.cssメモ - kurotei databook)を紹介しましたが、今回はその派生というか補佐であるWOW.jsについて紹介します。Animate.cssではページを開いたときにすべてのアニメーションを行ってしまうのですが、このWOW.jsを使えばスクロールしてコンテンツが画面に入った時にアニメーションさせることができます。
すごいホームページがかわいいです。ぼくはすきだよ

使い方

これまた簡単です。
まず、wow.jsをインストールします。そして、プログラムに読み込ませます。

<script src="js/wow.js"></script>
<script>
   new WOW().init();
</script>

こんな感じです。次にアニメーションさせたいタグにクラスを組み込みます。

<section class="wow(必須) fadeInRightBig(アニメーション名)">
これすき
</section>

こんな感じです。sectionを使った意味は特にありません。sectionの使い方わかりません。
クラスの大文字小文字は区別されますから、注意して書きましょう。アニメーション名はAnimate.cssを参考にしてください。
あと、前回のAnimate.cssではanimatedをクラスに入れましたが、WOW.jsを使ってアニメーションをさせる場合はanimetedは要りません。
また、ページを開いたときにすでに画面に入っている(最初から表示される)コンテンツにはWOW.jsよりAnimate.cssの方を使った方がよいでしょう。wow.jsだとアニメーションしなかったりします。

結論

とてもよい

リンク

Animate.css http://daneden.github.io/animate.css/
WOW.js http://mynameismatthieu.com/WOW/

WOW.js、正式名称は大文字なのにクラスは小文字ってめんどくさいことするなぁ。

デモページ

デモじゃなくて本番ですね
http://blacktails2.github.io/kotake.html