JavascriptとCSSで画像をふわっと表示させる

スクロールして画像が表示されるときにふわっと表示するやつ。

CSSで予め薄くして位置をずらしておいて、Javascriptで画像が現れたら元に戻す感じ。

CSS

img{
  transform: translateY(-5px);
  transition: 3.5s ease;
  opacity:0.3;
}

JavaScript

$(function(){
  $(window).on('load scroll', function(){
    //現時点のスクロールの高さ取得
    var scrollPosition = $(window).scrollTop();
    //ウィンドウの高さ取得
    var windowHeight = $(window).height();

    $('img').each(function(){
      //要素の位置（高さ）を取得
      var elemPosition = $(this).offset().top;
      //スクロールの高さが要素の位置を超えたら以下のスタイルを適用
      if(elemPosition < scrollPosition + windowHeight){
        $(this).css({
          opacity: 1,
          transform: 'translateY(0)'
        });
      }
    });
  });
});