【inview.js】画面スクロールで特定位置に入った要素をアニメーション表示させる簡単な方法

こんにちは、ハル@haru_elpisです。

inview.jsはスクロールして表示領域に入ったらイベントを開始させてくれるさせてくれるjQueryプラグインです。

jQuery・inview.jsの使い方

ダウンロード

ダウンロードした「jquery.inview.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script type="text/javascript" src="common/js/jquery.inview.js"></script>

html

<div class="box1 animated">fadeInDown</div>
<div class="box2 animated">bounceIn</div>
<div class="box3 animated">lightSpeedIn</div>

jQuery

$(function() {
  $('.box1').on('inview', function(event, isInView) {
    if (isInView) {
    //表示領域に入った時
      $(this).addClass('fadeInDown');
    } else {
    //表示領域から出た時
      $(this).removeClass('fadeInDown');
      $(this).css('opacity',0); //非表示にしておく
    }
  });
  $('.box2').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('bounceIn');
    } else {
      $(this).removeClass('bounceIn');
    }
  });
  $('.box3').on('inview', function(event, isInView) {
    if (isInView) {
      $(this).addClass('lightSpeedIn');
    } else {
      $(this).removeClass('lightSpeedIn');
    }
  });
});

この「jQuery.inview.js」というプラグインの利点は、シンプルにイベントとして返すだけなので実行する内容でいろいろと応用が効くので便利になってます。

アニメーショに色々チャレンジしてみてはいかがでしょうか。

[affi id=23]