スクロールアニメーションで文字を効果的に表示する方法

Posted on by

ウェブサイトのデザインにおいて、視覚的なインパクトを与える方法の一つにスクロールアニメーションがあります。特に、文字や画像がスクロールによってふわっと表示される演出は、訪問者にとって魅力的な体験となります。今回は、文字の上に長方形が乗っていて、スクロールするとそれが右から左に消えて文字が表示されるアニメーションを実装する方法を紹介します。

準備するもの

  • 基本的なHTML、CSS、JavaScriptの知識
  • テキストエディタ（例：VSCode、Sublime Text）

実装ステップ

1. HTMLの設定

まず、HTMLファイルを作成し、以下のコードを記述します。このコードには、スクロールアニメーションを適用する複数のテキストブロックが含まれています。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll Animation with Revealing Text</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }
    .container {
      padding: 50px;
      text-align: center;
    }
    .scroll-element {
      position: relative;
      overflow: hidden;
      display: inline-block;
      font-size: 2em;
      margin: 50px 0;
    }
    .scroll-element .overlay {
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: #000;
      transition: transform 1s ease-out;
      transform: translateX(0);
    }
    .scroll-element.visible .overlay {
      transform: translateX(100%);
    }
  </style>
</head>
<body>

<header>
  <h1>Scroll Animation with Revealing Text</h1>
</header>

<div class="container">
  <div class="scroll-element" data-scroll-animation>
    <div class="overlay"></div>
    <span>Scroll to see me!</span>
  </div>
  <div class="scroll-element" data-scroll-animation>
    <div class="overlay"></div>
    <span>Keep scrolling!</span>
  </div>
  <div class="scroll-element" data-scroll-animation>
    <div class="overlay"></div>
    <span>Almost there!</span>
  </div>
  <div class="scroll-element" data-scroll-animation>
    <div class="overlay"></div>
    <span>You did it!</span>
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const targetElements = document.querySelectorAll("[data-scroll-animation]");

    const options = {
      root: null,
      rootMargin: "0px",
      threshold: 0.1
    };

    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add("visible");
          observer.unobserve(entry.target);
        }
      });
    }, options);

    targetElements.forEach(target => {
      observer.observe(target);
    });
  });
</script>

</body>
</html>

コードの詳細解説

HTML部分

<header> タグにはページのタイトルを設定し、<div class="container"> の中に複数の .scroll-element を配置します。それぞれの要素には、表示されるテキスト (<span>) と、覆い隠す長方形 (<div class="overlay">) が含まれています。

CSS部分

.scroll-element クラスで、要素を相対配置し、.overlay クラスで長方形を絶対配置します。初期状態では長方形がテキスト全体を覆い隠しており、transform: translateX(0) によって位置を設定しています。.scroll-element.visible .overlay クラスでは、長方形が右から左に移動し、transform: translateX(100%) によって消えるアニメーションを実現します。

JavaScript部分

IntersectionObserver を使用して、ターゲット要素が画面内に入ったときに visible クラスを追加します。これにより、長方形が右から左に移動してテキストが表示されるようになります。

まとめ

この手法を使用すれば、スクロールに応じてテキストを覆う長方形が右から左に移動して消えるアニメーションを簡単に実現できます。ウェブサイトに視覚的な魅力を追加し、訪問者に印象的な体験を提供することができます。ぜひ試してみてください。