MontBlanc.です。
本日はWOW.jsについてお話したいと思います。
いぬかわいい。
使い方
まずは公式サイトからWOW.jsをダウンロード。
次に、動作に必要となるAnimate.cssとWOW.jsを読み込む。
<!--animate.css--> <link rel="stylesheet" type="text/css" href="css/animate.css"> <!--WOW.js--> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/wow.min.js"></script> <script> new WOW().init(); </script>
これで完了！
あとはアニメーションをさせたいものにCLASS値を入れるだけ。
画像はもちろん、テキストなどもすすっと動きます！
アニメーションについては、ブラウザのウィンドウに表示された時点で再生されるようです。
<div class="wow bounceInDown">WOWで動くよ！</div>
応用してみる
WOW.jsはAnimete.CSSというアクションを起こせるCSSのものをひとしきり使えます。
アニメーションの時間を調整する
<div class="wow bounceInDown" data-wow-duration="2s">WOWで動くよ！</div>
wowのCLASS値を入れている箇所にdata-wow-durationを入れます。
2sで2秒、1.5sのように小数点の使用も可能のようです。
アニメーションを開始する時間を調整する
<div class="wow bounceInDown" data-wow-delay="5s">WOWで動くよ！</div>
wowのCLASS値を入れている箇所にdata-wow-delayを入れます。
これも小数点の表示が可能
まとめ
アクションの順序を変えたり、アクションの種類など、書いていないこともありますが、
ざっくりとはこんな感じ。
導入が簡単であることが何よりの魅力ですね。jQueryも使わないってのが良い。
これを使えばけっこう簡単にパララックスなんとかってサイトも作れそう！笑
みなさんもお試しあれ！