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

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

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

jQuery・inview.jsの使い方

ダウンロード

GitHub - protonet/jquery.inview: A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view.

A jQuery plugin that adds a bindable 'inview' event for detecting when an element is scrolled into view. - protonet/jquery.inview

github.com

ダウンロードした「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」というプラグインの利点は、シンプルにイベントとして返すだけなので実行する内容でいろいろと応用が効くので便利になってます。

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