スクロールすると要素がフェードインする

スクロールをすると要素が表示されるエフェクトをjQueryとCSSを使って作ってみました。

jQuery で一定の位置まで要素がスクロールしたら、要素に.moveクラスを追加して、CSSで表示させています。

フェードインするサンプル

スクロールすると、紅葉の画像が現れます。

HTML

<section>
  <h1>スクロールしください</h1>
  <div>
    <img class="fadein" src="https://memorandum20.xsrv.jp/wp-content/uploads/2019/10/autumn-leaves.jpg" alt="">
  </div>
</section>

表示しているだけです。フェードインするimgに.fadein がついています。

CSS

section {
  margin: 0 auto 100px;
}

h1 {
  padding: 0.5em;
  background: #faa;
  color: #fff;
  text-align: center;
}

div {
  margin-top: 300px;
  text-align: center;
}

.fadein {
 opacity: 0; // 要素を透明化
 transform: translateY(50px); // 表示される場所より 50px 下に移動
 transition: all 1s; // 要素を表示させるまでの時間（今回は1秒）
}

.move {
  transform: translateY(0); // 表示される場所に移動
  opacity: 1; // 要素を不透明化
}

動きに関係しているCSSは .fadein と .move の二つです。

.fadein で透明化されて表示される場所（通常の位置）よりも50px下に移動して待機。
.fadein に書いてあるtransform の translateY() を変更すると、出てくる位置が変わり、transition の 1s の部分を変更すると表示されるのにかかる時間が変わります。

.move が追加されたら表示される場所に移動し、不透明化（見えるようになります）します。

jQuery

$(function () {
  $(window).scroll(function () {
    $('.fadein').each(function () {
      var window_height = $(window).height();
      var scroll_top = $(window).scrollTop();
      var element_position = $(this).offset().top;
      if (scroll_top > element_position - window_height + 100) {
        $(this).addClass('move');
      }

      // ページトップまで戻ったら .move が外れるようにしています。

      if (scroll_top < 100) {
        $(this).removeClass('move');
      }
    });
  });
});

まず、$(window).scroll(function(){……}); はスクロールしたら、{……} の部分を実行するという意味になります。
$(‘.fadein’).each(function () {……}); は .fadein ごとに{……}の部分の処理を行います。

下の3行は変数の宣言で、スクロールした後に発生するイベントの位置情報です。

var window_height = $(window).height();
ウィンドウの高さを取得して、変数window_heightに代入

var scroll_top = $(window).scrollTop();
ウィンドウがスクロールした位置を取得して、変数scroll_topに代入

var element_position = $(this).offset().top;
.fadein の座標を取得して変数element_positionに代入

if (scroll_top > element_position – window_height + 100) {……}
が、表示位置を計算して決めるための条件分岐です。
条件が true になったら、$(this).addClass(‘move’)で要素に .moveをつけて画像の表示が始まります。

最後に

動きがあると人の視線はそれに向かうので、いろいろと強調したい時や印象づけたい時に使うといいのではないかと思います。

おしゃれな感じやリッチな雰囲気も出てきます。ただ、視線がいくだけに多用すると嫌がられることもあると思うので、使いどころは考えたほうがいいと思いました。