スクロールしたらフワッと出てくる感じのやつ

スクロールしたら、アイキャッチ的に目を引くやつのサンプルです。
animateでtransformは動かないので、transitionで対応。





sample

See the Pen スクロールしたらフワッと出てくる感じのやつ by takapen (@takapen) on CodePen.

html

aaa


aaa


aaa


aaa

css

* {
  margin: 0;
  padding: 0;
}

jQuery

$(function(){
  var scrollEventItem = $('.js-scroll-event-item');
  scrollEventItem.css({
    "opacity": "0",
    "transform": "translateY(20px)",
    "transition": "transform 500ms"//transitionで時間を設定してアニメーションさせる
  });

  $(window).scroll(function (){
    scrollEventItem.each(function(){
      var thisPos = $(this).offset().top;
      var windowScrollTop = $(window).scrollTop();
      var windowHeight = $(window).height();

      if (windowScrollTop > thisPos - windowHeight + 200){
        $(this).css({//animateでtransformは動かないのでcss
          "opacity": "1",
          "transform": "translateY(0px)"
        }, 500);
      }

    });
  });

});