animate.cssとwow.jsを使って簡単にスクロールエフェクトを実装する方法
めでたくIE10以下の対応が切れる時代がやってきました。
CSS3アニメーション、いいですよね。
簡単にアニメーションが作れてとっても便利です。
でも、できることならもっとお手軽に扱いたい。
そんな貴方に朗報です。
animate.css
class名を追加するだけでcss3アニメーションを手軽に実装できるcssファイル。
ページ読み込み時に動作してしまうので、読み込みを制御したい場合は後述のwow.jsと組み合わせて使用することが多いです。
class名を追加するだけでcss3アニメーションを手軽に実装できるcssファイル。
ページ読み込み時に動作してしまうので、読み込みを制御したい場合は後述のwow.jsと組み合わせて使用することが多いです。
公式サイトからanimate.cssをダウンロードし、
head内でanimate.cssを読み込みましょう。
<link rel="stylesheet" type="text/css" href="css/animate.css">
あとは、アニメーションさせたい要素に「animated」というclass名と
アニメーションさせたいclass名を合わせて追加するだけ！
<div class="animated bounce">バウンドするよ</div>
だけど、
スクロールに応じて要素をアニメーションさせたい…という場合も多いですよね。
そこで必要になってくるのがこちら。
wow.js
class名を追加するだけで要素をスクロールに応じて制御できるjsプラグイン。
公式サイトの柴犬の目がインパクトありすぎて忘れられない。
＊最近ライセンスが商用利用のみ有料に変更したようなので注意してください！
class名を追加するだけで要素をスクロールに応じて制御できるjsプラグイン。
公式サイトの柴犬の目がインパクトありすぎて忘れられない。
＊最近ライセンスが商用利用のみ有料に変更したようなので注意してください！
公式サイトからwow.jsをダウンロードし、wow.jsを読み込みます。
＊jQueryは使用しないので、jQueryファイルを別途読み込む必要はありません。
<script src="js/wow.js"></script>
以下を間、または直前に記述しましょう。
<script> new WOW().init(); </script>
ちなみにスマホではアニメーションさせないようにすることもできます。
その場合はこちら。
<script>
new WOW({
mobile: false
}).init();
</script>
あとはアニメーションさせたい要素に「wow」というclass名を追加するだけ！
<div class="animated bounce wow">画面内に入ったらバウンドするよ</div>
またdata属性のオプションを追加するだけで
アニメーションを詳細に設定できます
data-wow-duration=”1.0s”
アニメーションにかける時間
data-wow-delay=”1.0s”
イベント発生からの遅延時間
data-wow-offset=”10″
通常、要素が画面下を基準としてアニメーションが発生していますが、基準を「画面下から何px上」に調整することができます
data-wow-iteration=”10″
指定した回数アニメーションを繰り返します
アニメーションにかける時間
data-wow-delay=”1.0s”
イベント発生からの遅延時間
data-wow-offset=”10″
通常、要素が画面下を基準としてアニメーションが発生していますが、基準を「画面下から何px上」に調整することができます
data-wow-iteration=”10″
指定した回数アニメーションを繰り返します
リピートさせたい場合はinfiniteというclassを合わせて指定しましょう
<div class="animated bounce wow infinite" data-wow-duration="1.0s">画面内に入ったら1秒かけてずっとバウンドするよ</div>
いかがでしたでしょうか
コーディングが苦手な方にも、時間がないコーダーにもオススメです
ちょっとしたアニメーションを実装させたいときに、ぜひ使ってみてください！
