[jQuery] スクロールに応じてカットイン

jQueryを使って上下左右のカットイン処理について記述します。（サンプル）
今回、タグに対してClassは下記のように設定します。
JavaScriptで、非表示に初期化をしているのでページの先頭からカットイン設定を与えるのは向いていません。ページのトップから与える場合は、HTML内に非表示のクラス（cutin-hide）を与えれば問題ないはずです。

<div class="cutin cutin-top">上から出るよ</div>
<div class="cutin cutin-right">右から出るよ</div>
<div class="cutin cutin-bottom">下から出るよ</div>
<div class="cutin cutin-left">左から出るよ</div>

SCSSで示すと次の通り
定義していることは、遷移時間と表示・非表示処理の設定のみ。

// カットイン処理
.cutin {
    /// 遷移時間
    transition: 1s;
    /// 非表示処理
    &.cutin-hide {
        opacity: 0;
    }
    /// 表示処理
    &.cutin-show {
        opacity: 1;
        transform: translate(0, 0) !important;
    }
    /// 上からカットイン
    &.cutin-top.cutin-hide {
        transform: translate(0, -50%);
    }
    /// 右からカットイン
    &.cutin-right.cutin-hide {
        transform: translate(50%, 0);
    }
    /// 下からカットイン
    &.cutin-bottom.cutin-hide {
        transform: translate(0, 50%);
    }
    /// 左からカットイン
    &.cutin-left.cutin-hide {
        transform: translate(-50%, 0);
    }
}

.cutin {
  -webkit-transition: 1s;
  transition: 1s;
}

.cutin.cutin-hide {
  opacity: 0;
}

.cutin.cutin-show {
  opacity: 1;
  -webkit-transform: translate(0, 0) !important;
          transform: translate(0, 0) !important;
}

.cutin.cutin-top.cutin-hide {
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

.cutin.cutin-right.cutin-hide {
  -webkit-transform: translate(50%, 0);
          transform: translate(50%, 0);
}

.cutin.cutin-bottom.cutin-hide {
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%);
}

.cutin.cutin-left.cutin-hide {
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}

jQueryは下記の処理にする。

// HTML読込終了に伴う処理
jQuery(document).ready(function() {
    /// ここは好みの問題 (JavaScriptの動作確認のためにわざわざクラスを与えて非表示にしている)
    /// 最初からHTML上でcutin-hideのクラスを与えていても良い
    $('.cutin').addClass('cutin-hide');
});

// スクロール処理
jQuery(window).scroll(function (){
  var scroll = $(window).scrollTop();
  var height = $(window).height();
  height = height / 2;

  $('.cutin').each(function(){
    var top = $(this).offset().top;
    if (scroll > top - height){
      $(this).addClass('cutin-show');
    }
  });
});