スクロールに合わせて要素をタイミングよくフェードインさせる方法

やりたいこと

よく見かける動きだと思いますが、スクロールで画面内に要素が表示されたタイミングでフェードインさせるというあれです。

使ったことはないですが、同様のアニメーションはjquery.inviewなどで実現できるみたいです。別途ライブラリを入れる程のことではないかなと思い、わりと要望も多いため、使い回せるようにjQueryプラグインとして作成しました。

こういう感じのレイアウトのやつです（イメージ図）

左右の画像がそれぞれ交互にフェードインします。

HTML

cssは掲載していませんが、fadeinRight fadeinLeftクラスの疑似要素にtransitionでフェードインのアニメーションを指定しています。

fadeinRightなら左から右に、fadeinLeftは右から左にフェードインさせるという具合です。

index.html

<div class="wrapper">
  <div class="block">
    <div class="block__item--img fadeinRight">
      <p>
        <img src="//images/block01.jpg">
      </p>
    </div>
    <div class="block__item">
      <div class="block__item__body">
        <h2 class="block__item__title">見出し</h2>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
  </div>
  <!-- /.block -->
  <div class="block">
    <div class="block__item">
      <div class="block__item__body">
        <h2 class="block__item__title">見出し</h2>
        <p>テキストテキストテキストテキストテキストテキスト</p>
      </div>
    </div>
    <div class="block__item--img fadeinLeft">
    <p>
      <img src="//images/block02.jpg">
    </p>
  </div>
  <!-- /.block -->
</div>
<!-- /.wrapper -->

JS 画面内の判定、クラス付与の処理

各画像が画面内に入ったタイミングでis-showクラスを付与し、上記で指定したクラスでフェードインさせます。

scripts.js

//プラグイン呼び出し元 関数
function fadeinAnimation() {
  //フェードインさせる要素を指定  
  var $target = $('.block__item--img');
  //要素の数だけプラグインを実行  
  for (var i = 0; i < $target.length; i++) {
    $target.eq(i).scrollIn();
  }
}
//プラグイン
(function ($) {
  $.fn.scrollIn = function (options) {

    var elements = this;
    var defaults = {
      position: 0.5, //フェードインさせる位置の基準
      className: 'is-show' //画面内に要素が入った時に付与するクラス
    };
    var setting = $.extend(defaults, options);

    $(window).on('load scroll', function () {
      addClass_scrolling();
    });

    function screenIn_Decision() {
      var winScroll = $(window).scrollTop(); //スクロール位置を取得（X軸）
      var winHeight = $(window).height(); //ブラウザの高さを取得
      var scrollPos = winScroll + (winHeight * setting.position);
      //スクロール位置がフェードインさせる要素の位置を上回ると'is-show'を追加
      if (elements.offset().top < scrollPos) {
        elements.addClass(setting.className);
      }
    }
  }
})(jQuery);

jQueryプラグインの作成方法についてはこちらをご参照下さい。
jquery プラグイン/作成