WOW.jsが有料なのでjQuery inviewを使用する

WOW.jsって便利ですよね。でも途中から有料になるのって、ext.jsを思い出したりしますよね。
有料は否定しないというか制作物である以上当然ともいえるのですが、途中からってー、ということで。

でも大丈夫。jQuery inviewを使用して、ある程度似たようなことができます。

まずは、jQueryとjQuery.inviewを読み込みます。
下記サイトからダウンロードしてきてもいいですし、当然CDNでも問題ありません。

もちろん、animate.cssも読み込んでおいてください。

<link type="text/css" rel="stylesheet" href="/path/to/animate.css">

<script src="/path/to/jquery-1.xx.xmin.js"></script>
<script src="/path/to/jquery.inview.min.js"></script>

これで、[inview]というイベントが使えるようになりました。

次に、JavaScriptに処理内容を記述します。
構文の意味などはよその親切な解説サイトをご覧くださいませ。

animate_init = function(){
  //画面に入るたびに毎回動作する
  $('.iv').on('inview', function(event, isInView) {
    if (isInView) {
      var delay = $(this).data('delay') ? $(this).data('delay') : 0;

      $(this).css('visibility', 'visible');
      if( delay > 0 ){
        $(this).css('animation-delay', delay+ 's');
      }
      $(this).addClass('animated '+ $(this).data('animate') );

    } else {
      $(this).removeClass('animated '+ $(this).data('animate'));
      $(this).css('visibility', 'hidden');
      $(this).dequeue();
    }
  });

  //最初に画面に入った時に1回だけ動作して、イベントを削除する
  $('.ivo').on('inview', function(event, isInView) {
    if (isInView) {
      var delay = $(this).data('delay') ? $(this).data('delay') : 0;

      $(this).css('visibility', 'visible');
      if( delay > 0 ){
        $(this).css('animation-delay', delay+ 's');
      }
      $(this).addClass('animated '+ $(this).data('animate'));

      $(this).off('inview');
    }
  });
};
$(documend).ready(function(){
  animate_init();
});

inviewの範囲内に入るまでは対象の要素を非表示にしておきたいので、CSSには下記を足しておきます。

.iv,.ivo{
  visibility: hidden;
}

これで、class名に[iv]または[ivo]と入れた要素がアニメーションするようになります。
動作させたい要素に下記classやdataの値を記述してください。

class: [iv|ivo]（ivは範囲内に入ると毎回動作、ivoは初回の1回のみ動作する）
data-animate: animate.cssの各class名
data-delay: inviewの範囲に入ってから動作開始までの遅延時間（秒）

※durationはあまり使用していなかったので対応させませんでした。delayと同じような記述をJavaScript側に追加してやれば対応可能です。

ということで、HTML側の記述はこんな感じです。

<div class="ivo" data-animate="flipInY" data-delay="0.2">
 ...内容...
</div>

これでWOW.jsっぽい動作をするようになりました。
ちょっとキャッチーな動きを付けたい程度の場合はこれで十分だと思います。

最初は毎回動作するほうがたのしーってなるのですが、だんだん鬱陶しくなってきます。また、inview範囲ぎりぎりに要素がある場合にずーっと動き続けることがあるので、全然使ってません。。。

WOW.jsが有料なのでjQuery inviewを使用する

新着記事