wow.jsとanimate.cssでスクロールアニメーション

スクロールをして要素に達したらアニメーションさせる方法

これまでプラグイン使わずに下記のように書いてスクロールアニメーションを実現していましたが、プラグインでもできるようなので紹介します。

$(function(){
     $(window).on('scroll',function(){ 
          var scrollPosition = $('.aaa').offset().top - $(window).height(); 
          if($(window).scrollTop() > scrollPosition + 300){
              $('.aaa').stop().fadeIn(700);
          }
     });
});

①wow.jsとanimate.cssをダウンロード

◯wow.js

http://mynameismatthieu.com/WOW/

◯animate.css

https://daneden.github.io/animate.css/

②head内に記述し、読み込み

<link rel="stylesheet" href="css/animate/animate.css">

<script src="js/wow/wow.js"></script>

<script>
    new WOW().init();
</script>

animate.cssはそのままでいいのですが、wow.jsは上記のように記述する必要があります。

※WOWを小文字にすると動かなかったので、大文字で書きます。

③使い方

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

アニメーションさせたい要素のCLASS名に「wow」と「（アニメーション名）」を追加します。
アニメーションはanimate.cssの公式サイトから選ぶことができます。
上記のように書くと下にスクロールして要素が見えた瞬間にフェードインアニメーションがスタートするようになります。   細かく設定したい場合は、wow.jsのオプションを活用しましょう。

＜オプション＞

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

＜例＞株式会社乾様サイト http://www.inig.co.jp/

<p class="anime_img_1 wow fadeInUp" data-wow-duration="2s" data-wow-offset="200"><img src="images/1.jpg" ></p>

このように書くと、要素に達してからさらに200pxスクロールした時に、下から浮かび上がるように要素が2秒かけて出てきます。

簡単にスクロールアニメーションが実現できました。ぜひ使ってみてください。