スクロールして要素が画面内に入ったらフェードインさせる

<body class="bg">
  <main>
    <div class="scroll-fade-up"></div>
    <div class="scroll-fade-up"></div>
    <div class="scroll-fade-up"></div>
  </main>
</body>
.scroll-fade-up {
  background-color: #3cb371;
  height: 200px;
  margin: 500px auto;
  width: 80%;
}

HTMLは、フェードインさせたい要素にjQueryで使うclassを付けるだけである。
上記でいえばclass=”scroll-fade-up”となる。

jQueryはフェードのタイミング、移動距離、スピードなどは以下の2～4行目で調整可能である。
フェード前はopacity: 0;で見えないようにしている。

$(function () {
  const fade_bottom = 50; // 画面下からどの位置でフェードさせるか(px)
  const fade_move = 100; // どのぐらい要素を動かすか(px)
  const fade_time = 800; // フェードの時間(ms)

  // フェード前のcssを定義
  $(".scroll-fade-up").css({
    opacity: 0,
    transform: "translateY(" + fade_move + "px)",
    transition: fade_time + "ms",
  });

  // スクロールまたはロードするたびに実行
  $(window).on("scroll load", function () {
    const scroll_top = $(this).scrollTop();
    const scroll_bottom = scroll_top + $(this).height();
    const fade_position = scroll_bottom - fade_bottom;
    $(".scroll-fade-up").each(function () {
      const this_position = $(this).offset().top;
      if (fade_position > this_position) {
        $(this).css({
          opacity: 1,
          transform: "translateY(0)",
        });
      }
    });
  });
});

フェードインする方向はtransformのプロパティ値を以下のように変更する。

$(".scroll-fade-up").css({
  transform: "translateY(" + fade_move + "px)", // 下から上
  transform: "translateY(-" + fade_move + "px)", // 上から下
  transform: "translateX(" + fade_move + "px)", // 右から左
  transform: "translateX(-" + fade_move + "px)", // 左から右
});

See the Pen フェードイン（アップ） by junpei (@junpei-sugiyama) on CodePen.

inserted by FC2 system