スクロールエフェクトいろいろ

作ったスクロールエフェクトを集めました。
スクロールすると要素が出現します。

スクロール値によってjsでクラス’is_visible’をつけています。
そのあとのアニメーションはすべてcssです。
 

See the Pen 180727_スクロールエフェクトいろいろカタログ by nekuta (@nekuta) on CodePen.

 
js(jQuery)

var tgt = $('.ef');

//loadとscrollしたとき
$(window).on('load scroll',function(){
  var wh = $(window).height();
  var sc = $(window).scrollTop();

  var action = function(){
    //.efのある分だけまわす
    tgt.each(function(){
     var border = $(this).offset().top;
     if(sc > border - wh +100){
      $(this).addClass('is_visible');
     }
    });
  };
  action();
});
  • コーダーのための計算機