Windowスクロールでふわっと出現するアレ

ブラウザスクロールでふわっと出現する視覚効果をJS単体のみで書きました。
都度書くのは面倒なのでスニペット的な備忘録です。
ちなみにjQueryを使ってます。

var setTransitionFlg = false;

$(function(){
  $(".effect").each(function(index, element){
    $(element).css("opacity", "0");
    $(element).css("transform", "translate(0, 50px)");
    $(element).css("-webkit-transform", "translate(0, 50px)");
  });
});

$(window).scroll(function(){
  $(".effect").each(function(index, element){
    if (!setTransitionFlg) {
      $(element).css("transition", "all 500ms 0s ease-out");
    }
    var position = $(element).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (position - windowHeight < scroll - 120) {
      $(element).css("opacity", "1.0");
      $(element).css("transform", "translate(0, 0)");
      $(element).css("-webkit-transform", "translate(0, 0)");
    }
  });
  setTransitionFlg = true;
});

class="effect" としたところがふわっとなります。

以上