Animate.cssから好きな動きを確認し、今回は「bounceInUp」を使用してみます。

<div class="wow bounceInUp">
	動きをつけたいコンテンツ
</div>

bounceInUp

その他、下記の指定をすることで、アニメーションが開始される
距離、時間、回数など変更出来ます。

  • ・data-wow-offset="10″
     要素が表示されてから、アニメーションを開始するまでの距離を指定
  • ・data-wow-delay="1.0s”
     要素を表示後、指定した秒数遅らせてアニメーションを表示
  • ・data-wow-duration="1.0s”
     指定した秒数をかけてアニメーションを表示
  • ・data-wow-iteration="10″
     アニメーションを繰り返す回数を指定

(例)「data-wow-offset="100"」を指定すると。
要素が表示されてから100px後にアニメーションが開始されます。

<div class="wow bounceInUp" data-wow-offset="100">
	動きをつけたいコンテンツ
</div>

slideInLeft

例)「data-wow-iteration="5"」を指定すると。
アニメーションを5回繰り返します。

<div class="wow bounceInUp" data-wow-iteration="5"">
	動きをつけたいコンテンツ
</div>

lip

以上「wow.js」のご紹介でした。