ScrollReveal.jsの使い方とサンプルLP｜簡単スクロール演出を実装

Webサイトにアニメーションを取り入れたいとき、軽量で手軽に導入できるライブラリがあると便利です。
この記事では、ScrollReveal.jsの基本的な使い方と、実践的なサンプルとしてデモサイトを紹介します。

✅ ScrollReveal.jsとは？

ScrollReveal.jsは、スクロールに応じて要素をフェードインやスライドインさせる軽量のJavaScriptライブラリです。
HTMLにdata-属性を書く必要がなく、JavaScriptだけでアニメーション制御ができる点が大きな特徴です。

🔧 主なメリット

軽量（~4KB）
HTMLを汚さずに導入できる
多彩なアニメーション（スライド・フェード・スケール等）
商用無料（MITライセンス）

🛠 ScrollReveal.jsの基本的な使い方

<!-- スクリプト読み込み -->
<script src="https://unpkg.com/scrollreveal"></script>

<!-- アニメーション適用 -->
<script>
  ScrollReveal().reveal('.your-class', {
    duration: 1000,
    distance: '50px',
    origin: 'bottom'
  });
</script>

.your-class にアニメーションが適用されます。
複数のエフェクトを使い分けたい場合は、クラスを分けて設定しましょう。

🎨 ファッション雑誌風LPのデモサンプル

以下は、ScrollReveal.js を活用して実装したファッションマガジン風のLPサンプルです。
背景画像、グリッドレイアウト、ギャラリー風の横スクロールなど、視覚的に印象的なデザインを取り入れています。

💡 下記コードはそのままコピペして試せます。

💻 コード全体はこちら

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LPデモ</title>
    <script src="https://unpkg.com/scrollreveal"></script>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet" />
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Playfair Display", serif;
        background: #fff;
        color: #111;
      }

      header {
        background: url("https://picsum.photos/id/1024/1920/1080") no-repeat center center / cover;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      }

      header h1 {
        font-size: 4rem;
        letter-spacing: 4px;
      }

      .section {
        padding: 80px 20px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .section-title {
        font-size: 2.5rem;
        margin-bottom: 40px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        padding-bottom: 20px;
      }

      .two-col {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
      }

      .two-col img {
        width: 100%;
        border-radius: 8px;
      }

      .two-col .text {
        flex: 1;
      }

      .two-col .img {
        flex: 1;
      }

      .gallery {
        display: flex;
        overflow-x: auto;
        gap: 20px;
      }

      .gallery img {
        width: 300px;
        flex-shrink: 0;
        border-radius: 8px;
      }

      footer {
        background: #000;
        color: #fff;
        text-align: center;
        padding: 40px 20px;
      }

      @media (max-width: 768px) {
        .two-col {
          flex-direction: column;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1 class="sr-fade">FASHION IS CULTURE</h1>
    </header>

    <section class="section">
      <h2 class="section-title sr-bottom">LIFESTYLE & CULTURE</h2>
      <div class="two-col">
        <div class="img sr-left">
          <img src="https://picsum.photos/id/1011/600/400" alt="Fashion" />
        </div>
        <div class="text sr-right">
          <p>洗練されたライフスタイルとカルチャーの融合を体験。<br />トレンドを超えた日常美をあなたへ。</p>
        </div>
      </div>
    </section>

    <section class="section">
      <h2 class="section-title sr-bottom">最新のトレンド特集</h2>
      <div class="two-col">
        <div class="text sr-left">
          <p>今注目のモードスタイルやエシカルファッションを特集。感度の高い読者に贈る、最旬の着こなし。</p>
        </div>
        <div class="img sr-right">
          <img src="https://picsum.photos/id/1018/600/400" alt="Trend" />
        </div>
      </div>
    </section>

    <section class="section">
      <h2 class="section-title sr-bottom">PICKUP ARTICLES</h2>
      <div class="gallery sr-scale">
        <img src="https://picsum.photos/id/1025/300/400" alt="" />
        <img src="https://picsum.photos/id/1036/300/400" alt="" />
        <img src="https://picsum.photos/id/1050/300/400" alt="" />
        <img src="https://picsum.photos/id/1062/300/400" alt="" />
      </div>
    </section>

    <footer class="sr-fade">
      <p>© 2025 Fashion Culture Magazine</p>
    </footer>

    <script>
      ScrollReveal().reveal(".sr-fade", {
        duration: 1000,
        opacity: 0,
        distance: "20px",
        origin: "bottom",
      });

      ScrollReveal().reveal(".sr-bottom", {
        duration: 1000,
        distance: "30px",
        origin: "bottom",
      });

      ScrollReveal().reveal(".sr-left", {
        duration: 1000,
        distance: "50px",
        origin: "left",
      });

      ScrollReveal().reveal(".sr-right", {
        duration: 1000,
        distance: "50px",
        origin: "right",
      });

      ScrollReveal().reveal(".sr-scale", {
        duration: 1000,
        scale: 0.8,
      });
    </script>
  </body>
</html>

DEMO

🧪 アニメーションの種類例

クラス名	効果内容
`.sr-left`	左からスライドイン
`.sr-right`	右からスライドイン
`.sr-bottom`	下からスライドイン
`.sr-fade`	フェードイン
`.sr-scale`	拡大表示（CTAなどにおすすめ）
`.sr-zoom`	ズームイン（画像向き）

🔚 まとめ

ScrollReveal.jsは、LPやポートフォリオに印象的なスクロールアニメーションを簡単に追加できるライブラリです。

特に次のような方におすすめです：

HTMLをなるべくきれいに保ちたい方
AOSより柔軟に動きを制御したい方
サイトに軽量な演出を加えたい方

🧰 関連リンク

ScrollReveal公式サイト

✪ 画像素材がないものはランダムで表示されるようになっています。フリー素材などでご用意ください。

プラグイン名	特徴
GoFullPage	ウェブページ全体のスクリーンショットを簡単に取得できるブラウザ拡張機能です。
ColorZilla	色を抽出するための拡張機能です。
WhatFont	ウェブページ上のフォントの情報を簡単に確認できるブラウザ拡張機能です。
PerfectPixel	デザイナーが作成したデザインと実際にコーディングされたウェブページがどの程度一致しているかを確認・調整するためのブラウザ拡張機能です。

ステップ	内容
ステップ 1	構図を手書きか全画面スクショ（Go full page等）した後、ペイントツールで四角で囲い、大まかなclass,命名規則をあらかじめ決める。
ステップ 2	HTMLの基本構造を作成する
ステップ 3	CSSでレイアウトを模写する
ステップ 4 中級〜	JavaScriptを追加して動きを再現する
ステップ 5	最終調整を行い、検証ツールやPerfectPixel(chromeプラグイン)などで完成を確認する。