ページ最後で「Thank you!」がふわっと出る仕掛け｜CSS＋JSでつくる感謝の演出

10月 20, 2025 10月 20, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトを最後まで読んでくれたユーザーに、「読んでくれてありがとう！」と伝えたくなる瞬間ってありませんか？

ブログや商品ページの最後、
静かに浮かび上がる「Thank you!」の一言があるだけで、読後の印象はぐっと温かくなります。

最近では、エモーショナルな演出がユーザー体験の一部として注目されており、
「最後の余韻」をデザインすることがサイトの印象を決める大切なポイントになっています。

この記事では、ページを最後までスクロールしたタイミングで「Thank you!」がふわっと出る仕掛けを、HTML・CSS・JavaScriptで実装する方法を紹介します。
余計なライブラリは使わず、シンプルに動く仕組みを解説していきましょう。

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本のHTML構造

まずはシンプルなHTML構造から。
長いコンテンツの末尾に「Thank you!」を配置しておきます。

<div class="content">
  <h1>スクロールテスト用のコンテンツ</h1>
  <p>たくさんの文章や画像がここに入ります。</p>
</div>
<div class="thankyou">Thank you!</div>

CSSでふわっと出る演出をつける

ふわっと出る効果はCSSの opacity（透明度）と transform（位置）を使って実装します。

  .thankyou {
    position: fixed;
    bottom: 40%;
    left: 50%;
    transform: translate(-50%, 50%);
    font-size: 4rem;
    font-weight: bold;
    color: #ff69b4;
    opacity: 0;
    transition: all 1.2s ease;
    pointer-events: none;
  }
  .thankyou.visible {
    opacity: 1;
    transform: translate(-50%, 0);
  }

JavaScriptでスクロールを検知して表示

JavaScriptでは、ページのスクロール位置を取得し、
ページ最下部付近まで来たら「visible」クラスを付与してアニメーションを発火させます。

  const thankyou = document.querySelector(".thankyou");
  window.addEventListener("scroll", () => {
    const scrollY = window.scrollY;
    const windowHeight = window.innerHeight;
    const bodyHeight = document.body.offsetHeight;
    if (scrollY + windowHeight >= bodyHeight - 100) {
      thankyou.classList.add("visible");
    } else {
      thankyou.classList.remove("visible");
    }
  });

ちょっとした応用：グラデーションで特別感を演出

より印象的にするなら、文字にグラデーションをかけてみましょう。

  .thankyou {
    background: linear-gradient(45deg, #ff69b4, #ffa500, #ffff00);
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  }

これだけで、「Thank you!」がまるで光りながら浮かび上がるような印象に。
単なるテキスト演出を超えて、感謝の気持ちがデザインとして伝わる体験になります。