下からふわっと JavaScript

2025年1月6日2026年4月13日

URLをコピーしました！

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

今回はJavaScriptを使ってビューポート内に入ったら「下からふわっと出現」させる方法を解説します。

ではいく〜

今回やりたいことの大まかなイメージ

「ふわっと出現」させたい要素にクラス名を付与させる。

ふわっとの表現はCSSも使う

画面に入たかどうかはJavaScriptで判定する。

まずは HTML

以下のように「.fade_up」クラスを付与したHTMLを用意します。

<section class="about_section fade_up">
    ここに内容が入ります
</section>

CSS

画面に入ったら .is_show を付与してふわっと出てくるのを演出させます。

.fade_up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade_up.is_show {
  opacity: 1;
  transform: translateY(0);
}

コードの内容

opacity: 表示の透明度を指定します。
transform: translateY: 初期状態では40px下に移動してます。.fade_up.is_showになったら元の位置(translateY(0))に戻ります。
transition: 動きの内容と時間の配分を指定。

JavaScript

Intersection Observerを使って要素が画面に入ったかを判定して、.fade_up要素に.is_showを付与します。

document.addEventListener("DOMContentLoaded", function () {
  const targets = document.querySelectorAll(".fade_up");

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        entry.target.classList.add("is_show");
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.2
  });

  targets.forEach(function (target) {
    observer.observe(target);
  });
});