wow.jsを使用して様々なアニメーションを取り入れよう！

最近、作成しているサイトでwow.jsを使用してアニメーションをつけたのですが、結構スイスイで、加えてアニメーションの種類が豊富なので、思ったままアニメーションを付与できたので備忘録として残しておきます。

これまでも何度も使用しているのですが、毎回過去のコードを遡っていたので、これを機にここで私自身がよくつかうアニメーションをまとめておこうと思います。笑

 

まずはじめに

wow.jsを組み込むには、一緒にanimete.cssが必要になります。
<head>内に以下の2つを組み込んでおきましょう。

どちらもCDNがあるので、ダウンロードせずに組み込めますね！

 


<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css" media="all" >

<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

 

上のソースをそのままコピーしていただければ使用できます。

JSを読み込ませたいので、以下のソースを入れてあげます。

<script>
  wow = new WOW(
    {
    boxClass: 'wow', // default
    animateClass: 'animated', // default
    offset:0// アニメーションをスタートさせる距離
    }
  );
  wow.init();
</script>

意味はコメントアウトの通りです。

 

あとはアニメーションをしたい要素にクラス名のwowと実装したいアニメーションの指示を書いてあげます。
例えば、以下のような感じ。
以下はフェードインでアニメーションが実行されます。よく使うアニメーションです。

<div class="wow fadeIn"></div>

 

wow.jsのオプション

アニメーションを遅らせて表示したり、wow.jsはすごく優秀でいいオプションがあります。

data-wow-duration アニメーションの時間
data-wow-delay スクロールが要素に達してからアニメーションがスタートする時間
data-wow-offset スクロールが要素に達してからアニメーションがスタートする距離
data-wow-iteration アニメーションの繰り返し回数

 

ちょっと複雑なソースだと次のような感じ！笑

See the Pen wow.js by sayuri (@giraffeweb) on CodePen.0

 

いろんなアニメーションを組み合わせることで表現の幅が広がりますよね！

みなさんもぜひ使ってみてください。

【URL】Animete.css公式サイト
【URL】wow.js公式サイト

Share: