どうも7noteです。シャレたサイト作りに必須のスクロールしたらふわっと出てくるアレを作ります。

オシャレなサイトで見る、ふわっとコンテンツが表示される動きを実装していきます。
綺麗なデザインのサイトでよく見かける動きで、一番使われている動きじゃないかってくらい見かけます。

例えば・・・
https://kaketsugi.jp/
https://scrollrevealjs.org/

作り方

※jQueryを使用しています。jQueryって何？という方はこちら

index.html

<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>
<div class="box fadeIn"></div>

style.css

.box {
  width: 100%;        /* 横幅いっぱい */
  height: 300px;      /* 高さを300pxに指定 */
  background: #aaa;   /* 背景色を灰色にする */
  margin: 0 0 50px;   /* 下方向に適度な余白 */
  opacity: 0;         /* 初期値は透明にしておく */
  transition: .5s;    /* 動くスピードを0.5秒に指定 */
  position: relative; /* 相対位置の設定 */
  top: 50px;          /* 事前に下に50pxずらしておく */
}

.active {
  opacity: 1;         /* 透明度を元に戻す */
  top: 0;             /* ずらしていた位置を戻すことで上に上がっているようにみえる */
}

script.js

$(window).on('scroll load', function(){        /* ページロード時、またはスクロールされた時*/
  var scroll = $(this).scrollTop();            /* 現在のスクロール量を測定 */
  var windowHeight = $(window).height();       /* ウィンドウの高さを測定 */
  $('.fadeIn').each(function(){                /* 「fadeIn」のクラスがついているものを1つずつ確認し・・・ */
    var cntPos = $(this).offset().top;         /* 対象の要素の上からの距離を測定 */
    if(scroll > cntPos - windowHeight + windowHeight / 3){  /* 要素がある位置までスクロールされていたら */
      $(this).addClass('active');              /* 「active」のクラスを付与 */
    }
  });
});

完成イメージ

解説

使い方は、ふわっと表示させたい要素に「fadeIn」のクラスを付与するだけです。

見え隠れする動き自体は全てCSSでおこなっており、
transitionで動きにかかる時間。
opacityを0から1にすることでゆっくり表示。
position: relative;とtopで下から上にふわっと浮くような動きをしています。

トリガー（きっかけ）はjavascriptで操作しているのですが、
大きく3種類の高さを取得して、それを基準にクラスを出し分けてふわっと表示させています。
取得している高さは「現在の上からのスクロール量」「ウィンドウの高さ」「コンテンツの上からの高さ」です。
これをif文がかいているところで計算式にあてはめ、結論的には画面の下から1/3くらいを超えたら表示するようになっています。

※<!DOCTYPE html>を指定していないと$(window).height()がうまくうごかないので注意！