Web BENTO JS
カテゴリ一覧
スクロール出現

06 / REVEAL 12 パーツ

スクロール出現アニメーション 12選

Q: コピーしたコードはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

Q: scrollイベントではなくIntersectionObserverを使うのはなぜですか？

scrollイベントはスクロールのたびに発火して要素の位置計算が必要ですが、IntersectionObserverは要素が見えた瞬間だけブラウザが非同期で通知してくれるため、メインスレッドの負荷が小さく、スクロールがカクつきません。

Q: 一度表示したあと、もう一度アニメーションさせられますか？

できます。「一度だけ/毎回 切替」パーツのように、画面外に出たら is-view クラスを外す実装にすると、スクロールで戻すたびに再生されます。既定では unobserve して一度だけの再生にしています。

Q: アニメーションが苦手なユーザーへの配慮はありますか？

すべてのサンプルは prefers-reduced-motion を matchMedia で判定し、OSで「視差効果を減らす」を設定しているユーザーにはアニメーションなしで即表示するフォールバックを実装しています。

Q: このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「左右からスライドイン」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

コピペで動くスクロール出現（スクロールリビール）のサンプル集です。プレビューは枠の中だけをスクロールして動きを試せます。すべてscrollイベント不使用のIntersectionObserverで軽快に動作します。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成します。依存ライブラリなしのバニラJS・data-bnto-* 属性による自動初期化式です。

該当するパーツが見つかりませんでした。

↓ この枠内を下にスクロール

下からふわっと出現！
いちばん基本のフェードアップです。

フェードアップ

<!-- 出現させたい要素に class と data-bnto-rev を付けるだけ -->
<div class="bnto-rev" data-bnto-rev>
  ここに中身（テキスト・カード・画像など何でもOK）
</div>
<!-- 内側スクロール領域の中で使う場合のみ data-root="#その要素のセレクタ" を追加 -->

.bnto-rev {
  --c1: hsl(187 64% 46%);  /* アクセント色 */
  --dur: .6s;               /* 出現スピード */
  background: #fff; border: 2px solid #DFE9F1;
  border-left: 5px solid var(--c1);
  border-radius: 12px; padding: 13px 15px;
  /* 初期状態：透明＋下に24pxずらしておく */
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.bnto-rev.is-view { opacity: 1; transform: none; }
/* 動きが苦手な人には即表示 */
@media (prefers-reduced-motion: reduce) { .bnto-rev { transition: none; } }

// data-bnto-rev を自動検出して監視（複数設置OK・二重実行OK）
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 「視差効果を減らす」設定 or 非対応ブラウザは即表示
    if (reduce || !('IntersectionObserver' in window)) { el.classList.add('is-view'); return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準（このページのデモはミニ枠を指定）
    var root = el.dataset.root ? document.querySelector(el.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target); // 一度表示したら監視解除
      });
    }, { root: root, threshold: 0.2 });
    io.observe(el);
  });
})();

使い方のコツ

ページ内の複数要素にそれぞれ付けてOKです。translateY(24px) を 40px にすると動きが大きく、--dur を短くするとキビキビした印象になります。カードの装飾（背景や枠線）は自由に差し替えてください。

↓ この枠内を下にスクロール

← 左からスライドイン

右からスライドイン →

左右からスライドイン

<!-- .from-left / .from-right で出現方向を指定 -->
<div class="bnto-rev-side from-left" data-bnto-rev-side>
  左から出現する要素
</div>
<div class="bnto-rev-side from-right" data-bnto-rev-side>
  右から出現する要素
</div>

.bnto-rev-side {
  --c1: hsl(345 80% 55%); --dur: .6s;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 11px 13px;
  opacity: 0;
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
/* 方向はクラスで切り替え */
.bnto-rev-side.from-left  { border-left: 5px solid var(--c1); transform: translateX(-36px); }
.bnto-rev-side.from-right { border-right: 5px solid var(--c1); transform: translateX(36px); }
.bnto-rev-side.is-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bnto-rev-side { transition: none; } }

// data-bnto-rev-side を自動検出して監視（複数設置OK・二重実行OK）
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-side]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    if (reduce || !('IntersectionObserver' in window)) { el.classList.add('is-view'); return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = el.dataset.root ? document.querySelector(el.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target);
      });
    }, { root: root, threshold: 0.2 });
    io.observe(el);
  });
})();

使い方のコツ

横にはみ出した初期状態がページの横スクロールを生むことがあるので、親要素（または body）に overflow-x: hidden を付けておくと安心です。画像とテキストを左右交互に出すレイアウトと好相性です。

↓ この枠内を下にスクロール

ズームイン出現！

ズームイン

<div class="bnto-rev-zoom" data-bnto-rev-zoom>
  ズームインで出現する要素
</div>

.bnto-rev-zoom {
  --c1: hsl(26 90% 55%); --dur: .6s;
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; background: var(--c1); color: #fff;
  border-radius: 14px; font-weight: 800;
  opacity: 0; transform: scale(.7);
  /* 最後に少し行き過ぎて戻る、弾むイージング */
  transition: opacity var(--dur) ease,
    transform var(--dur) cubic-bezier(.2, .8, .3, 1.15);
}
.bnto-rev-zoom.is-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bnto-rev-zoom { transition: none; } }

// data-bnto-rev-zoom を自動検出して監視（複数設置OK・二重実行OK）
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-zoom]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    if (reduce || !('IntersectionObserver' in window)) { el.classList.add('is-view'); return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = el.dataset.root ? document.querySelector(el.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target);
      });
    }, { root: root, threshold: 0.2 });
    io.observe(el);
  });
})();

使い方のコツ

バッジ・CTAボタン・数字の実績など「主役」を1つだけ目立たせる用途に向いています。scale(.7) を .5 にすると勢いが増し、1.15（行き過ぎ量）を 1 にすると弾まない落ち着いた動きになります。

↓ この枠内を下にスクロール

1つ目が出て

2つ目が続き

3つ目で完成！

順番に出現（stagger）

<!-- 直下の子要素に自動で遅延が付く。data-step で間隔（秒）を変更可 -->
<div class="bnto-stagger" data-bnto-rev-stagger data-step="0.12">
  <div class="it">項目1</div>
  <div class="it">項目2</div>
  <div class="it">項目3</div>
</div>

.bnto-stagger {
  --c1: hsl(150 58% 42%); --dur: .4s;
  display: flex; flex-direction: column; gap: 8px;
}
/* 子要素すべてが対象（遅延はJSが自動付与） */
.bnto-stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.bnto-stagger.is-view > * { opacity: 1; transform: none; }
/* ↓デモの見た目（自由に差し替えOK） */
.bnto-stagger .it {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 10px; padding: 9px 12px; font-weight: 700;
}
.bnto-stagger .it::before {
  content: ""; flex: none; width: 9px; height: 9px;
  border-radius: 50%; background: var(--c1);
}
@media (prefers-reduced-motion: reduce) { .bnto-stagger > * { transition: none; } }

// 子要素に遅延を自動付与して、親が見えたら順番に出現
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-stagger]').forEach(function (group) {
    if (group.dataset.bntoInit) return;
    group.dataset.bntoInit = '1';
    if (reduce || !('IntersectionObserver' in window)) { group.classList.add('is-view'); return; }
    // 子要素の数だけ data-step 秒（既定0.12s）ずつ遅らせる
    var step = parseFloat(group.dataset.step || '0.12');
    Array.prototype.forEach.call(group.children, function (kid, i) {
      kid.style.transitionDelay = (i * step) + 's';
    });
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = group.dataset.root ? document.querySelector(group.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target);
      });
    }, { root: root, threshold: 0.2 });
    io.observe(group);
  });
})();

使い方のコツ

特徴リスト・料金カード・メンバー紹介などのグリッドに最適です。項目が多いときは data-step="0.06" のように間隔を詰めると、待たせずにリズム感だけ残せます。

↓ この枠内を下にスクロール

ピントが合うように、ぼかしが解除されて出現します。

ブラー解除

<div class="bnto-rev-blur" data-bnto-rev-blur>
  <b>ピントが合う</b>ように出現する要素
</div>

.bnto-rev-blur {
  --c1: hsl(258 47% 54%); --dur: .9s;
  background: #fff; border: 2px solid #DFE9F1;
  border-radius: 12px; padding: 12px 14px;
  /* 初期状態：ぼかし＋半透明 */
  opacity: 0; filter: blur(10px);
  transition: opacity var(--dur) ease, filter var(--dur) ease;
}
.bnto-rev-blur b { color: var(--c1); }
.bnto-rev-blur.is-view { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .bnto-rev-blur { transition: none; } }

// data-bnto-rev-blur を自動検出して監視（複数設置OK・二重実行OK）
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-blur]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    if (reduce || !('IntersectionObserver' in window)) { el.classList.add('is-view'); return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = el.dataset.root ? document.querySelector(el.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target);
      });
    }, { root: root, threshold: 0.2 });
    io.observe(el);
  });
})();

使い方のコツ

filter: blur() は描画コストがやや高めの効果です。多数の要素に一斉適用せず、キャッチコピーやキービジュアルなど「ここ一番」に絞って使うと、印象と軽さを両立できます。

↓↑ この枠内を往復スクロール

REPEAT
上に戻して、もう一度下へ。何度でも出現します。

一度だけ／毎回切替

<!-- data-once="false" にするとスクロールで戻すたびに再生（既定は一度だけ） -->
<div class="bnto-rev-re" data-bnto-rev-re data-once="false">
  <span class="tag">REPEAT</span><br>
  何度でも出現する要素
</div>

.bnto-rev-re {
  --c1: hsl(202 73% 50%); --dur: .6s;
  background: #fff; border: 2px solid var(--c1);
  border-radius: 12px; padding: 11px 13px;
  opacity: 0; transform: translateY(20px) scale(.96);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.bnto-rev-re .tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--c1); color: #fff;
  font-size: 10px; font-weight: 900; margin-bottom: 5px;
}
.bnto-rev-re b { color: var(--c1); }
.bnto-rev-re.is-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bnto-rev-re { transition: none; } }

// data-once="false" で毎回再生／既定（未指定 or "true"）は一度だけ
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-re]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    if (reduce || !('IntersectionObserver' in window)) { el.classList.add('is-view'); return; }
    var once = el.dataset.once !== 'false';
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = el.dataset.root ? document.querySelector(el.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (en.isIntersecting) {
          en.target.classList.add('is-view');
          if (once) io.unobserve(en.target);
        } else if (!once) {
          en.target.classList.remove('is-view'); // 画面外に出たらリセット→再度出現
        }
      });
    }, { root: root, threshold: 0.25 });
    io.observe(el);
  });
})();

使い方のコツ

毎回再生は目を引きますが、本文中で多用するとうるさく感じられます。読み物ページでは既定の「一度だけ」を推奨します。毎回再生はループ動画的な装飾や、遊び心のあるLPのアクセントに向いています。

↓ この枠内を下にスクロール

スクロールに合わせて、 1行ずつ順番に テキストが現れます。

行ごとにテキスト出現

<!-- 出したい行ごとに .ln で区切る（遅延はJSが自動付与） -->
<p class="bnto-rev-lines" data-bnto-rev-lines>
  <span class="ln">1行目のテキスト</span>
  <span class="ln"><b>2行目は強調</b></span>
  <span class="ln">3行目のテキスト</span>
</p>

.bnto-rev-lines {
  --c1: hsl(41 100% 47%); --dur: .6s;
  font-weight: 800; line-height: 1.9;
}
.bnto-rev-lines .ln {
  display: block;
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.bnto-rev-lines .ln b { color: var(--c1); }
.bnto-rev-lines.is-view .ln { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bnto-rev-lines .ln { transition: none; } }

// .ln（行）ごとに遅延を付けて、ブロックが見えたら順番にせり上げる
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-lines]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    if (reduce || !('IntersectionObserver' in window)) { box.classList.add('is-view'); return; }
    box.querySelectorAll('.ln').forEach(function (ln, i) {
      ln.style.transitionDelay = (i * 0.18) + 's';
    });
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = box.dataset.root ? document.querySelector(box.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target);
      });
    }, { root: root, threshold: 0.3 });
    io.observe(box);
  });
})();

使い方のコツ

行の区切りは .ln で手動指定する設計です（自動分割は画面幅で折り返し位置が変わり崩れやすいため）。キャッチコピーやセクション見出しなど、行数が決まった短文に使ってください。

↓ この枠内を下にスクロール

画像ふわっと表示

<!-- src は軽いプレースホルダ、data-src に本画像。読み込み完了(onload)でフェードイン -->
<img class="bnto-rev-img" data-bnto-rev-img loading="lazy"
  src="placeholder.jpg" data-src="photo.jpg"
  width="600" height="300" alt="写真の説明">

.bnto-rev-img {
  --dur: .9s;  /* フェードの長さ */
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  background: #DFE9F1;  /* 読み込み前の下地 */
  opacity: 0; transform: scale(1.03);
  transition: opacity var(--dur) ease, transform var(--dur) ease;
}
.bnto-rev-img.is-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .bnto-rev-img { transition: none; } }

// 見える直前に data-src を読み込み、onload でふわっとフェードイン
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-rev-img]').forEach(function (img) {
    if (img.dataset.bntoInit) return;
    img.dataset.bntoInit = '1';
    function show() { img.classList.add('is-view'); }
    function load() {
      if (img.dataset.src) { img.src = img.dataset.src; img.removeAttribute('data-src'); }
      if (img.complete) show();
      else img.addEventListener('load', show);
    }
    if (reduce || !('IntersectionObserver' in window)) { load(); return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準
    var root = img.dataset.root ? document.querySelector(img.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        load();
        io.unobserve(en.target);
      });
    }, { root: root, threshold: 0.2 });
    io.observe(img);
  });
})();

使い方のコツ

width/height 属性を必ず指定するとレイアウトシフト（CLS）を防げます。もっと早めに読み込み始めたいときは、observer のオプションに rootMargin: "200px" を足してください。デモの画像はCSSグラデのSVGで代用しています。

↓↑ この枠内を往復スクロール

背景の図形が少しずつ
遅れてついてきます。

軽量パララックス

<!-- data-speed＝ついてくる割合（0.2〜0.5目安・大きいほどよく動く） -->
<div class="bnto-prlx" data-bnto-prlx>
  <span class="sp a" data-speed="0.2" aria-hidden="true"></span>
  <span class="sp b" data-speed="0.35" aria-hidden="true"></span>
  <span class="sp c" data-speed="0.5" aria-hidden="true"></span>
  <p class="cap">前景のコンテンツ</p>
</div>
<!-- 内側スクロール領域の中で使う場合のみ data-root="#その要素のセレクタ" を追加 -->

.bnto-prlx {
  --c1: hsl(217 80% 56%);  /* 図形の色 */
  position: relative; overflow: hidden;  /* はみ出た図形を隠す */
  display: flex; align-items: center; justify-content: center;
  min-height: 150px; background: #fff;
  border: 2px solid #DFE9F1; border-radius: 14px;
}
/* 背景図形（JSがtranslateYを付与） */
.bnto-prlx .sp {
  position: absolute; border-radius: 50%;
  background: var(--c1); pointer-events: none;
  will-change: transform;
}
.bnto-prlx .sp.a { width: 72px; height: 72px; left: 6%; top: -14px; opacity: .18; }
.bnto-prlx .sp.b { width: 46px; height: 46px; right: 10%; top: 22px; opacity: .3; }
.bnto-prlx .sp.c { width: 26px; height: 26px; left: 34%; bottom: -2px; opacity: .45; }
/* 前景は relative で図形の上に */
.bnto-prlx .cap { position: relative; margin: 0; padding: 0 16px; font-weight: 800; text-align: center; }
.bnto-prlx .cap b { color: var(--c1); }

// data-speed の分だけスクロールに遅れて動く軽量パララックス
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-prlx]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    // 「視差効果を減らす」設定では動かさない（静止したまま表示）
    if (reduce) return;
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準（このページのデモはミニ枠を指定）
    var root = box.dataset.root ? document.querySelector(box.dataset.root) : null;
    var scroller = root || window;
    var items = box.querySelectorAll('[data-speed]');
    var active = true, ticking = false;
    function update() {
      ticking = false;
      if (!active) return;
      // 画面（またはroot）中央からのずれ × data-speed の分だけ動かす
      var rect = box.getBoundingClientRect();
      var center = root
        ? root.getBoundingClientRect().top + root.clientHeight / 2
        : window.innerHeight / 2;
      var delta = rect.top + rect.height / 2 - center;
      items.forEach(function (el) {
        var speed = parseFloat(el.dataset.speed || '0.3');
        el.style.transform = 'translateY(' + (delta * speed).toFixed(1) + 'px)';
      });
    }
    function onScroll() {
      if (ticking) return;  // rAFで1フレーム1回に間引き
      ticking = true;
      requestAnimationFrame(update);
    }
    scroller.addEventListener('scroll', onScroll, { passive: true });
    // 画面外にある間は計算を止める
    if ('IntersectionObserver' in window) {
      new IntersectionObserver(function (entries) {
        active = entries[0].isIntersecting;
        if (active) onScroll();
      }, { root: root }).observe(box);
    }
    update();  // 初期位置を反映
  });
})();

使い方のコツ

動かすのは transform のみ・計算は requestAnimationFrame で1フレーム1回に間引き・画面外では停止、と軽さ重視の構成です。data-speed は 0.2〜0.5程度の控えめな値が上品に見えます。図形の数は2〜3枚までにし、テキストの可読性を邪魔しない薄い色（opacity）で使ってください。

↓ この枠内を下にスクロール

セクション1
青みの背景

セクション2
緑の背景に変化

セクション3
オレンジに変化

セクション背景色モーフ

<!-- 親に data-bnto-bgmorph、各セクションに data-bg="色" を指定 -->
<div class="bnto-bgmorph" data-bnto-bgmorph>
  <div class="sec" data-bg="hsl(199 80% 52%)">セクション1</div>
  <div class="sec" data-bg="hsl(150 58% 42%)">セクション2</div>
  <div class="sec" data-bg="hsl(26 90% 55%)">セクション3</div>
</div>
<!-- 内側スクロール領域の中で使う場合のみ data-root="#その要素のセレクタ" を追加 -->

.bnto-bgmorph {
  --dur: .6s;  /* 背景色が切り替わる速さ */
  position: relative; border-radius: 14px; overflow: hidden;
  /* 背景色そのものをなめらかに変化させる */
  transition: background-color var(--dur) ease;
}
/* 各セクション：中身のレイアウトは自由に差し替えOK */
.bnto-bgmorph .sec {
  min-height: 110px; display: flex;
  align-items: center; justify-content: center;
  padding: 14px 16px;
}
.bnto-bgmorph .sec p { margin: 0; color: #fff; font-weight: 800; text-align: center; }
@media (prefers-reduced-motion: reduce) { .bnto-bgmorph { transition: none; } }

// 最も見えている .sec の data-bg を親要素の background-color に反映
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgmorph]').forEach(function (box) {
    if (box.dataset.bntoInit) return;
    box.dataset.bntoInit = '1';
    var secs = box.querySelectorAll('.sec[data-bg]');
    if (!secs.length) return;
    // 非対応環境・reduced-motionでは最初の色に固定して終了
    if (reduce || !('IntersectionObserver' in window)) { box.style.backgroundColor = secs[0].dataset.bg; return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準（このページのデモはミニ枠を指定）
    var root = box.dataset.root ? document.querySelector(box.dataset.root) : null;
    var ratios = new Map();
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) { ratios.set(en.target, en.intersectionRatio); });
      // 交差率が最大＝いちばん見えているセクションの色を採用
      var best = null, bestRatio = 0;
      secs.forEach(function (sec) {
        var r = ratios.get(sec) || 0;
        if (r > bestRatio) { bestRatio = r; best = sec; }
      });
      if (best) box.style.backgroundColor = best.dataset.bg;
    }, { root: root, threshold: [0, .25, .5, .75, 1] });
    secs.forEach(function (sec) { io.observe(sec); });
  });
})();

使い方のコツ

各セクションの data-bg に指定した色へ、スクロールに応じてなめらかに切り替わります。ページ全体で使う場合は複数の <section> を縦に並べて親要素にまとめてください。色数は3〜5程度に絞ると、どこを読んでいるか分かりやすいままになります。

↓ この枠内を下にスクロール

カーテンが開いて
中身が現れます

COVER

カーテン開きリビール

<!-- .curtain-cover が見えたタイミングで横にスライドして中身が現れる -->
<div class="bnto-curtain" data-bnto-curtainreveal>
  <p class="cap">画像やボックスの中身</p>
  <div class="curtain-cover"></div>
</div>

.bnto-curtain {
  --c1: hsl(266 62% 55%); --c2: hsl(199 80% 52%); --dur: .7s;
  position: relative; overflow: hidden; border-radius: 14px;
  min-height: 110px; background: linear-gradient(135deg, var(--c1), var(--c2));
  display: flex; align-items: center; justify-content: center;
}
/* カバー：初期状態は要素いっぱいに被さっている */
.bnto-curtain .curtain-cover {
  position: absolute; inset: 0; background: #fff; z-index: 2;
  transition: transform var(--dur) cubic-bezier(.65, 0, .35, 1);
}
/* 見えたら左へ100%スライドして退場 */
.bnto-curtain.is-view .curtain-cover { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .bnto-curtain .curtain-cover { transition: none; } }

// data-bnto-curtainreveal を自動検出して監視（複数設置OK・二重実行OK）
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-curtainreveal]').forEach(function (el) {
    if (el.dataset.bntoInit) return;
    el.dataset.bntoInit = '1';
    // 「視差効果を減らす」設定 or 非対応ブラウザは即座にカーテンを開く
    if (reduce || !('IntersectionObserver' in window)) { el.classList.add('is-view'); return; }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準（このページのデモはミニ枠を指定）
    var root = el.dataset.root ? document.querySelector(el.dataset.root) : null;
    var io = new IntersectionObserver(function (entries) {
      entries.forEach(function (en) {
        if (!en.isIntersecting) return;
        en.target.classList.add('is-view');
        io.unobserve(en.target); // 一度開いたら監視解除
      });
    }, { root: root, threshold: 0.35 });
    io.observe(el);
  });
})();

使い方のコツ

.curtain-cover の背景色をサイトのベースカラーに合わせると馴染みます。画像に使う場合は .bnto-curtain の中に <img> を敷き詰めるだけでOKです。translateX(-100%) を translateY(-100%) にすれば上に開く演出にもなります。

↓ この枠内を下にスクロール

STEP 1お問い合わせ
STEP 2ヒアリング
STEP 3制作・実装
STEP 4公開・納品

伸びるタイムライン

<!-- li を工程の数だけ並べ、最後に空の span.bar を1つ置く -->
<ul class="bnto-tl" data-bnto-timelinegrow>
  <li><b>STEP 1</b>お問い合わせ</li>
  <li><b>STEP 2</b>ヒアリング</li>
  <li><b>STEP 3</b>制作・実装</li>
  <li><b>STEP 4</b>公開・納品</li>
  <span class="bar"></span>
</ul>
<!-- 内側スクロール領域の中で使う場合のみ data-root="#その要素のセレクタ" を追加 -->

.bnto-tl {
  --c1: hsl(150 58% 42%);  /* 通過済みの色 */
  position: relative; padding-left: 28px;
  margin: 0; list-style: none;
}
/* 下地の縦線（未通過） */
.bnto-tl::before {
  content: ""; position: absolute; left: 9px; top: 4px; bottom: 4px;
  width: 2px; background: #DFE9F1;
}
/* 伸びる線（JSが height を更新） */
.bnto-tl .bar {
  position: absolute; left: 9px; top: 4px; width: 2px; height: 0;
  background: var(--c1); transition: height .25s linear;
}
.bnto-tl li { position: relative; padding: 0 0 20px; font-weight: 700; }
/* 各ステップのマーカー（丸） */
.bnto-tl li::before {
  content: ""; position: absolute; left: -28px; top: 1px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid #DFE9F1;
  transition: background-color .2s ease, border-color .2s ease;
}
/* 線が通過したステップに印が点く */
.bnto-tl li.is-done::before { border-color: var(--c1); background: var(--c1); }
.bnto-tl li b { display: block; color: #8a93a0; }
.bnto-tl li.is-done b { color: var(--c1); }
@media (prefers-reduced-motion: reduce) { .bnto-tl .bar { transition: none; } }

// スクロール位置に応じて縦線を伸ばし、通過したステップに is-done を付与
(function () {
  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-timelinegrow]').forEach(function (list) {
    if (list.dataset.bntoInit) return;
    list.dataset.bntoInit = '1';
    var bar = list.querySelector('.bar');
    var steps = Array.prototype.filter.call(list.children, function (kid) { return kid.tagName === 'LI'; });
    if (!bar || !steps.length) return;
    // 「視差効果を減らす」設定では線を最後まで伸ばして全ステップ完了にする
    if (reduce) {
      bar.style.height = '100%';
      steps.forEach(function (li) { li.classList.add('is-done'); });
      return;
    }
    // root は通常 null（ページ全体基準）。data-root="#セレクタ" 指定時はその要素基準（このページのデモはミニ枠を指定）
    var root = list.dataset.root ? document.querySelector(list.dataset.root) : null;
    var scroller = root || window;
    var ticking = false;
    function update() {
      ticking = false;
      var rect = list.getBoundingClientRect();
      var viewBottom = root ? root.getBoundingClientRect().bottom : window.innerHeight;
      // リストの下端が画面下からどれだけ入ってきたかを 0〜1 の進捗に変換
      var total = rect.height;
      var progress = (viewBottom - rect.top) / total;
      progress = Math.max(0, Math.min(1, progress));
      bar.style.height = (progress * 100) + '%';
      var barPx = progress * total;
      steps.forEach(function (li) {
        li.classList.toggle('is-done', li.offsetTop <= barPx);
      });
    }
    function onScroll() {
      if (ticking) return;  // rAFで1フレーム1回に間引き
      ticking = true;
      requestAnimationFrame(update);
    }
    scroller.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    update();  // 初期位置を反映
  });
})();

使い方のコツ

採用フロー・制作の流れ・料金プランの手順など、3〜5ステップ程度の工程紹介に向いています。ステップ数が多いページでは、線の伸びを追いやすいよう1画面に収まる高さに調整すると読みやすくなります。

スクロール出現アニメーションの基礎知識

スクロール出現（スクロールリビール）は、ページを読み進めるのに合わせてコンテンツをふわっと表示させる演出です。「読む→現れる」のリズムが生まれ、LPやコーポレートサイトの印象がぐっと上質になります。このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptです。jQueryもAOSなどのプラグインも不要です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

IntersectionObserverがscrollイベントより軽い理由

従来の scroll イベント方式は、スクロールのたびにハンドラが発火し、getBoundingClientRect() などで要素の位置を毎回計算する必要がありました。これはメインスレッドを占有し、スクロールのカクつき（ジャンク）の原因になります。IntersectionObserver は「要素が見えたかどうか」の判定をブラウザ側が非同期で行い、変化したときだけ通知してくれるAPIです。JS側は通知を受けてクラスを付けるだけなので、監視対象が増えても負荷がほとんど変わりません。

使いすぎに注意（動きは「ここぞ」で）

すべての要素をアニメーションさせると、ユーザーは「表示待ち」を強いられ、かえって読みにくくなります。1画面につき1〜2カ所、セクションの見出しやキービジュアルなど視線を集めたい場所に絞るのがコツです。また filter: blur() のような描画コストの高い効果は多用を避け、透明度と位置（opacity / transform）中心の軽い効果を基本にしましょう。

prefers-reduced-motion への配慮

OSの設定で「視差効果を減らす」を選んでいるユーザーには、動きの大きな演出が不快感や体調不良（前庭障害など）につながることがあります。このページのサンプルはすべて matchMedia('(prefers-reduced-motion: reduce)') で設定を判定し、該当ユーザーにはアニメーションなしで即表示するフォールバックを実装済みです。コピペするだけでアクセシブルな挙動になります。

「全部コピー」と「分けて貼る」の使い分け

「全部コピー」を使うと、HTML・CSS・JavaScriptがひとつの自己完結ブロックとしてコピーされるので、1回の貼り付けだけですぐ動きを確認できます。動作のお試しや、1ページ完結のLPに組み込むときはこの方法が手軽です。

一方、本番サイトへ本格的に組み込む場合は、CSSはスタイルシート（.cssファイル）へ、JavaScriptは</body>直前や共通の.jsファイルへ、HTMLは使いたい場所へと分けて貼るのが一般的です。スタイルとスクリプトを1か所に集約できるため、複数ページ・複数パーツで使い回すときの管理がしやすく、ブラウザのキャッシュも効きやすくなります。なお、同じパーツをページ内で何度も使う場合でも、CSSとJSを貼るのは1回だけで大丈夫です（初期化スクリプトが該当要素すべてに自動で効きます）。

よくある質問

コピーしたコードはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされ、ページに貼り付けるだけで動きます。ライブラリの読み込みは一切不要です。

scrollイベントではなくIntersectionObserverを使うのはなぜですか？

scroll イベントはスクロールのたびに発火して要素の位置計算が必要ですが、IntersectionObserver は要素が見えた瞬間だけブラウザが非同期で通知してくれるため、メインスレッドの負荷が小さく、スクロールがカクつきません。

一度表示したあと、もう一度アニメーションさせられますか？

できます。「一度だけ/毎回切替」パーツのように、画面外に出たら is-view クラスを外す実装にすると、スクロールで戻すたびに再生されます。既定では unobserve して一度だけの再生にしています。

アニメーションが苦手なユーザーへの配慮はありますか？

すべてのサンプルは prefers-reduced-motion を matchMedia で判定し、OSで「視差効果を減らす」を設定しているユーザーにはアニメーションなしで即表示するフォールバックを実装しています。

このページのパーツはAIコーディングツールでも使えますか？

はい。Claude CodeやCursorのようにWebページを読めるAIには、このページのURLとパーツ名（例:「左右からスライドイン」）を伝えるだけで実装を指示できます。AIがWebを読めない場合は、「全部コピー」で取得した自己完結ブロックをチャットに貼り付けて調整を頼むのが確実です。改変後のコードは、公開前に動作確認することをおすすめします。

スクロール出現アニメーション 12選

フェードアップ

左右からスライドイン

ズームイン

順番に出現（stagger）

ブラー解除

一度だけ／毎回 切替

行ごとにテキスト出現

画像ふわっと表示

軽量パララックス

セクション背景色モーフ

カーテン開きリビール

伸びるタイムライン

スクロール出現アニメーションの基礎知識

IntersectionObserverがscrollイベントより軽い理由

使いすぎに注意（動きは「ここぞ」で）

prefers-reduced-motion への配慮

「全部コピー」と「分けて貼る」の使い分け

よくある質問

関連カテゴリ

一度だけ／毎回切替