Web BENTO JS
カテゴリ一覧
背景エフェクト

14 / BACKGROUND 12 パーツ

JS動く背景エフェクト 12選

Q: コピーした背景エフェクトはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされます。position:relative を付けた親要素（セクションやヒーロー）の中に貼り付けるだけで動き、ライブラリの読み込みは一切不要です。

Q: 背景アニメーションはページを重くしませんか？

各パーツは requestAnimationFrame で描画し、IntersectionObserver によって画面外にあるあいだは自動で停止します。粒子の数も data-count 属性で減らせるので、負荷を抑えて使えます。

Q: スマホやRetinaディスプレイでもきれいに表示されますか？

表示されます。canvas系のパーツは devicePixelRatio に対応しているため高解像度でもにじまず、親要素のサイズ変更にも自動で追従します。マウス追従系のパーツは、タッチ環境では初期状態の静かな表示のままになります。

Q: 動きが苦手な閲覧者への配慮はできますか？

できます。OSで「視差効果を減らす」を設定している閲覧者（prefers-reduced-motion）には、アニメーションを行わず初期配置の静止表示だけを行うように実装済みです。

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

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

コピペで動く背景エフェクト（動く背景）のサンプル集。プレビューは実際に動いています（マウス追従系はカーソルをのせて動かしてみてください）。HTML / CSS / JS タブでコードを確認し、全部コピーを押せば1回の貼り付けで完成。すべて依存ライブラリなしのバニラJSで、data-bnto-* 属性による自動初期化式です。画面外では自動停止するパフォーマンス配慮つきです。

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

HERO SECTION浮遊パーティクル

浮遊パーティクル

<!-- 背景を敷きたい親（セクションやヒーロー）に position:relative を付けて、
     その先頭にこの1行を置く。上に載せる中身は position:relative; z-index:1 に -->
<div class="bnto-bgdots" data-bnto-bgdots data-count="40" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgdots {
  --c1: hsl(205 85% 72%);  /* 光点の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bgdots canvas { display: block; width: 100%; height: 100%; }

// data-bnto-bgdots を自動検出して初期化（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgdots]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var count = parseInt(bg.dataset.count, 10) || 40;
    var dots = [], W = 0, H = 0, raf = 0, shown = true;
    function resize() {
      var dpr = window.devicePixelRatio || 1;   // Retinaでもにじまない
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function seed() {
      dots = [];
      for (var i = 0; i < count; i++) dots.push({
        x: Math.random() * W, y: Math.random() * H,
        r: 1 + Math.random() * 2.5,
        vx: (Math.random() - .5) * .35, vy: (Math.random() - .5) * .35,
        a: .25 + Math.random() * .6
      });
    }
    function draw() {
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#9CC4EE';
      dots.forEach(function (d) {
        ctx.globalAlpha = d.a;
        ctx.beginPath(); ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2); ctx.fill();
      });
      ctx.globalAlpha = 1;
    }
    function tick() {
      dots.forEach(function (d) {
        d.x += d.vx; d.y += d.vy;
        if (d.x < -5) d.x = W + 5; if (d.x > W + 5) d.x = -5;
        if (d.y < -5) d.y = H + 5; if (d.y > H + 5) d.y = -5;
      });
      draw();
      raf = requestAnimationFrame(tick);
    }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize(); seed(); draw();   // reduced-motion 時はこの静止画のまま
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); draw(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); draw(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

粒の数は data-count、色は --c1 で調整できます。モバイルでは30個前後に抑えるのがおすすめです。画面外に出ると IntersectionObserver が描画を自動停止するので、長いページに置いても無駄なCPU消費が発生しません。

SECTION BGネットワーク線

ネットワーク線

<!-- 親（section等）に position:relative を付けて先頭に置く。
     上に載せる中身は position:relative; z-index:1 に -->
<div class="bnto-bgnet" data-bnto-bgnet data-count="35" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgnet {
  --c1: hsl(185 70% 62%);  /* 粒子と線の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bgnet canvas { display: block; width: 100%; height: 100%; }

// 近い粒子同士を線で結ぶ定番の背景（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgnet]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var count = parseInt(bg.dataset.count, 10) || 35;
    var dots = [], W = 0, H = 0, raf = 0, shown = true;
    function resize() {
      var dpr = window.devicePixelRatio || 1;
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function seed() {
      dots = [];
      for (var i = 0; i < count; i++) dots.push({
        x: Math.random() * W, y: Math.random() * H,
        vx: (Math.random() - .5) * .45, vy: (Math.random() - .5) * .45
      });
    }
    function draw() {
      ctx.clearRect(0, 0, W, H);
      var col = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#6FD3DE';
      ctx.strokeStyle = col; ctx.fillStyle = col; ctx.lineWidth = 1;
      for (var i = 0; i < dots.length; i++) {
        for (var j = i + 1; j < dots.length; j++) {
          var dx = dots[i].x - dots[j].x, dy = dots[i].y - dots[j].y;
          var d = Math.sqrt(dx * dx + dy * dy);
          if (d < 90) {   // 近い粒子同士だけ線で結ぶ
            ctx.globalAlpha = (1 - d / 90) * .5;
            ctx.beginPath(); ctx.moveTo(dots[i].x, dots[i].y); ctx.lineTo(dots[j].x, dots[j].y); ctx.stroke();
          }
        }
      }
      dots.forEach(function (p) {
        ctx.globalAlpha = .85;
        ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI * 2); ctx.fill();
      });
      ctx.globalAlpha = 1;
    }
    function tick() {
      dots.forEach(function (p) {
        p.x += p.vx; p.y += p.vy;
        if (p.x < 0 || p.x > W) p.vx *= -1;   // 端で反射
        if (p.y < 0 || p.y > H) p.vy *= -1;
      });
      draw();
      raf = requestAnimationFrame(tick);
    }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize(); seed(); draw();   // reduced-motion 時はこの静止画のまま
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); draw(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); draw(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

粒子を増やすと線の判定は2乗のペースで増えます。広い画面でも data-count="50" 程度まで、スマホでは30以下が目安です。線がつながる距離はJS内の 90（px）を変更すると調整できます。IT・テック系サイトのヒーロー背景と好相性です。

MOVE CURSORマウス追従グラデーション

マウス追従グラデーション

<!-- 親（section等）に position:relative を付けて先頭に置く。
     マウス座標は親要素の上で拾うので、親自体は普通に操作できる -->
<div class="bnto-bgglow" data-bnto-bgglow aria-hidden="true"></div>

/* radial-gradient の中心（--mx / --my）をJSがカーソルに追従させる */
.bnto-bgglow {
  --c1: hsl(215 90% 60%);  /* 追従する光の色 */
  --c2: hsl(275 80% 62%);  /* 固定側の光の色 */
  --mx: 50%; --my: 50%;
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  opacity: .5;
  background:
    radial-gradient(circle 340px at var(--mx) var(--my), var(--c1), transparent 70%),
    radial-gradient(circle 300px at 85% 15%, var(--c2), transparent 70%);
}

// カーソルを radial-gradient の中心（--mx / --my）がふわっと追いかける
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgglow]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    if (reduced) return;   // reduced-motion 時は中央固定の静止グラデーションのまま
    var cx = .5, cy = .5, tx = .5, ty = .5, raf = 0, shown = true;
    function tick() {
      cx += (tx - cx) * .08; cy += (ty - cy) * .08;   // 0.08＝追従の柔らかさ
      bg.style.setProperty('--mx', cx * 100 + '%');
      bg.style.setProperty('--my', cy * 100 + '%');
      // 追いついたらループを止める（省エネ）
      if (shown && Math.abs(tx - cx) + Math.abs(ty - cy) > .001) raf = requestAnimationFrame(tick);
      else raf = 0;
    }
    function start() { if (!raf && shown) raf = requestAnimationFrame(tick); }
    bg.parentElement.addEventListener('mousemove', function (e) {
      var r = bg.getBoundingClientRect();
      tx = (e.clientX - r.left) / r.width;
      ty = (e.clientY - r.top) / r.height;
      start();
    });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else { cancelAnimationFrame(raf); raf = 0; }
    }).observe(bg);
  });
})();

使い方のコツ

追従の柔らかさはJS内の 0.08（イージング係数）で調整します。小さくするほどゆったり遅れて付いてきます。カーソルのないタッチ端末では、CSSの初期値どおり中央に光が置かれた静かなグラデーションとして表示されるので破綻しません。

SECTION BGウェーブ

ウェーブ

<!-- 親（section等）に position:relative を付けて先頭に置く。
     data-count は重ねる波の本数 -->
<div class="bnto-bgwave" data-bnto-bgwave data-count="3" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgwave {
  --c1: hsl(210 80% 55%);  /* 波の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bgwave canvas { display: block; width: 100%; height: 100%; }

// 重なるサイン波がゆらめく背景（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgwave]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var waves = parseInt(bg.dataset.count, 10) || 3;
    var t = 0, W = 0, H = 0, raf = 0, shown = true;
    function resize() {
      var dpr = window.devicePixelRatio || 1;
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function draw() {
      ctx.clearRect(0, 0, W, H);
      ctx.fillStyle = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#3D8BD4';
      for (var i = 0; i < waves; i++) {
        var amp = 10 + i * 6;           // 波の高さ
        var base = H * .58 + i * 16;    // 波の水位
        ctx.beginPath();
        ctx.moveTo(0, H);
        for (var x = 0; x <= W; x += 6) {
          ctx.lineTo(x, base + Math.sin(x * .014 + t * (1 + i * .35) + i * 2.2) * amp);
        }
        ctx.lineTo(W, H);
        ctx.closePath();
        ctx.globalAlpha = .16 + i * .1;   // 奥の波ほど薄く重ねる
        ctx.fill();
      }
      ctx.globalAlpha = 1;
    }
    function tick() { t += .02; draw(); raf = requestAnimationFrame(tick); }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize(); draw();   // reduced-motion 時はこの静止画のまま
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); draw(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); draw(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

波の本数は data-count で変えられますが、3〜4本あれば十分に豊かな重なりになります。水位はJS内の H * .58、ゆらぎの速さは t += .02 で調整してください。フッター直上の飾りやCTAセクションの背景にも向いています。

WINTER SALE降る雪

降る雪

<!-- 親（section等）に position:relative を付けて先頭に置く。
     data-count は画面内に舞う数の目安 -->
<div class="bnto-bgsnow" data-bnto-bgsnow data-count="30" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgsnow {
  --c1: hsl(0 0% 100%);  /* 雪の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
/* 1粒＝JSが生成する i 要素。落下はCSSアニメに任せる */
.bnto-bgsnow i {
  position: absolute; top: -10px;
  border-radius: 50%; background: var(--c1);
  animation: bnto-snowfall linear forwards;
}
@keyframes bnto-snowfall {
  to { transform: translate(var(--sway), var(--fall)); opacity: .15; }
}

// 大きさ・速度・横ゆれランダムの雪。降り終えた粒は自動削除
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgsnow]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var count = parseInt(bg.dataset.count, 10) || 30;   // 画面内に舞う数の目安
    function spawn(still) {
      var f = document.createElement('i');
      var s = 2 + Math.random() * 4;
      f.style.width = f.style.height = s + 'px';
      f.style.left = Math.random() * 100 + '%';
      f.style.opacity = .35 + Math.random() * .55;
      if (still) {   // reduced-motion: 静止配置だけ行う
        f.style.top = Math.random() * 100 + '%';
        f.style.animation = 'none';
      } else {
        f.style.setProperty('--fall', (bg.clientHeight + 24) + 'px');
        f.style.setProperty('--sway', (Math.random() * 60 - 30) + 'px');
        f.style.animationDuration = 4 + Math.random() * 5 + 's';
        f.addEventListener('animationend', function () { f.remove(); });   // 自動削除
      }
      bg.appendChild(f);
    }
    if (reduced) { for (var i = 0; i < count; i++) spawn(true); return; }
    var raf = 0, last = 0, shown = true, gap = 6500 / count;
    function tick(now) {
      if (now - last > gap) { last = now; spawn(false); }
      raf = requestAnimationFrame(tick);
    }
    function start() { if (!raf && shown) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    // 画面外にいるあいだは生成を停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

雪の量は data-count（画面内に舞う目安の数）で調整します。降り終えた粒は animationend で自動削除されるので、長時間表示してもDOMは増え続けません。冬季キャンペーンやクリスマスLPの期間限定演出にぴったりです。

AQUA SECTION上昇する泡

上昇する泡

<!-- 親（section等）に position:relative を付けて先頭に置く。
     data-count は画面内に浮かぶ数の目安 -->
<div class="bnto-bgbub" data-bnto-bgbub data-count="18" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgbub {
  --c1: hsl(195 85% 68%);  /* 泡の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
/* 1粒＝JSが生成する i 要素。下から上へ、途中で横にゆらぐ */
.bnto-bgbub i {
  position: absolute; bottom: -22px;
  border-radius: 50%; border: 2px solid var(--c1);
  animation: bnto-bubrise linear forwards;
}
@keyframes bnto-bubrise {
  50%  { transform: translate(var(--sway), calc(var(--rise) * .5)); }
  100% { transform: translate(0, var(--rise)); opacity: 0; }
}

// 下から上へのぼる泡。ゆらぎ付き・のぼり終えたら自動削除
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgbub]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var count = parseInt(bg.dataset.count, 10) || 18;   // 画面内に浮かぶ数の目安
    function spawn(still) {
      var b = document.createElement('i');
      var s = 6 + Math.random() * 12;
      b.style.width = b.style.height = s + 'px';
      b.style.left = Math.random() * 100 + '%';
      b.style.opacity = .3 + Math.random() * .5;
      if (still) {   // reduced-motion: 静止配置だけ行う
        b.style.bottom = Math.random() * 100 + '%';
        b.style.animation = 'none';
      } else {
        b.style.setProperty('--rise', '-' + (bg.clientHeight + 50) + 'px');
        b.style.setProperty('--sway', (Math.random() * 52 - 26) + 'px');
        b.style.animationDuration = 3.5 + Math.random() * 3.5 + 's';
        b.addEventListener('animationend', function () { b.remove(); });   // 自動削除
      }
      bg.appendChild(b);
    }
    if (reduced) { for (var i = 0; i < count; i++) spawn(true); return; }
    var raf = 0, last = 0, shown = true, gap = 5200 / count;
    function tick(now) {
      if (now - last > gap) { last = now; spawn(false); }
      raf = requestAnimationFrame(tick);
    }
    function start() { if (!raf && shown) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    // 画面外にいるあいだは生成を停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

横ゆれの幅はJS内の --sway の範囲（±26px）で調整します。上昇距離は親の高さから自動計算されるので、どんな高さのセクションに置いても画面外まできちんとのぼります。水・温泉・飲料など「清涼感」を出したいLPと好相性です。

NIGHT SKY星空またたき

星空またたき

<!-- 暗い背景色の親（section等）に position:relative を付けて先頭に置く。
     data-count は星の数 -->
<div class="bnto-bgstar" data-bnto-bgstar data-count="70" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgstar {
  --c1: hsl(50 95% 82%);  /* 星と流れ星の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bgstar canvas { display: block; width: 100%; height: 100%; }

// ランダム配置の星が明滅し、たまに流れ星が走る（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgstar]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var count = parseInt(bg.dataset.count, 10) || 70;
    var stars = [], meteor = null, t = 0, W = 0, H = 0, raf = 0, shown = true;
    function resize() {
      var dpr = window.devicePixelRatio || 1;
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function seed() {
      stars = [];
      for (var i = 0; i < count; i++) stars.push({
        x: Math.random() * W, y: Math.random() * H,
        r: .4 + Math.random() * 1.3,
        ph: Math.random() * 6.28,
        sp: .02 + Math.random() * .05,
        base: .3 + Math.random() * .45
      });
    }
    function draw() {
      ctx.clearRect(0, 0, W, H);
      var col = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#F9EFB8';
      ctx.fillStyle = col;
      stars.forEach(function (s) {
        ctx.globalAlpha = Math.max(.05, s.base + Math.sin(t * s.sp + s.ph) * .35);   // またたき
        ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, Math.PI * 2); ctx.fill();
      });
      if (meteor) {   // 流れ星（尾はグラデーションで）
        var g = ctx.createLinearGradient(meteor.x, meteor.y, meteor.x - meteor.vx * 9, meteor.y - meteor.vy * 9);
        g.addColorStop(0, col); g.addColorStop(1, 'transparent');
        ctx.globalAlpha = meteor.life;
        ctx.strokeStyle = g; ctx.lineWidth = 1.6;
        ctx.beginPath(); ctx.moveTo(meteor.x, meteor.y);
        ctx.lineTo(meteor.x - meteor.vx * 9, meteor.y - meteor.vy * 9); ctx.stroke();
      }
      ctx.globalAlpha = 1;
    }
    function tick() {
      t += 1;
      if (!meteor && Math.random() < .004) meteor = {   // たまに出現
        x: Math.random() * W * .7, y: Math.random() * H * .35,
        vx: 4 + Math.random() * 3, vy: 2 + Math.random() * 1.5, life: 1
      };
      if (meteor) {
        meteor.x += meteor.vx; meteor.y += meteor.vy; meteor.life -= .02;
        if (meteor.life <= 0) meteor = null;
      }
      draw();
      raf = requestAnimationFrame(tick);
    }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize(); seed(); draw();   // reduced-motion 時はこの静止画のまま
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); draw(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); draw(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

星の数は data-count、流れ星の出現頻度はJS内の .004（1フレームあたりの確率）で調整できます。背景が暗いほどまたたきがきれいに見えるので、ネイビーや黒に近い親要素に敷いてください。ナイトツアーや天体系コンテンツに映えます。

MOVE CURSORスポットライトグリッド

スポットライトグリッド

<!-- 親（section等）に position:relative を付けて先頭に置く。
     マウス座標は親要素の上で拾う。data-size はマスの一辺(px) -->
<div class="bnto-bggrid" data-bnto-bggrid data-size="42" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bggrid {
  --c1: hsl(160 84% 55%);  /* グリッド線と光の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bggrid canvas { display: block; width: 100%; height: 100%; }

// マス目がカーソル近傍だけ光るグリッド（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bggrid]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var size = parseInt(bg.dataset.size, 10) || 42;   // マスの一辺(px)
    var R = 110;                                      // 光が届く半径(px)
    var W = 0, H = 0, raf = 0, shown = true, mx = -999, my = -999, tx = -999, ty = -999;
    function resize() {
      var dpr = window.devicePixelRatio || 1;
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function draw() {
      ctx.clearRect(0, 0, W, H);
      var col = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#37D69B';
      ctx.globalAlpha = .13; ctx.strokeStyle = col; ctx.lineWidth = 1;   // うっすらグリッド線
      ctx.beginPath();
      for (var x = .5; x <= W; x += size) { ctx.moveTo(x, 0); ctx.lineTo(x, H); }
      for (var y = .5; y <= H; y += size) { ctx.moveTo(0, y); ctx.lineTo(W, y); }
      ctx.stroke();
      ctx.fillStyle = col;   // カーソル近くのマスだけ点灯
      for (var gx = 0; gx < W; gx += size) {
        for (var gy = 0; gy < H; gy += size) {
          var d = Math.hypot(gx + size / 2 - mx, gy + size / 2 - my);
          if (d < R) {
            ctx.globalAlpha = (1 - d / R) * .38;
            ctx.fillRect(gx + 1.5, gy + 1.5, size - 2, size - 2);
          }
        }
      }
      ctx.globalAlpha = 1;
    }
    function tick() {
      mx += (tx - mx) * .16; my += (ty - my) * .16;   // 光がふわっと遅れて追従
      draw();
      if (shown && Math.abs(tx - mx) + Math.abs(ty - my) > .5) raf = requestAnimationFrame(tick);
      else raf = 0;   // 追いついたらループを止める（省エネ）
    }
    function start() { if (!raf && shown) raf = requestAnimationFrame(tick); }
    resize(); draw();
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); draw(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); draw(); });
    if (reduced) return;   // reduced-motion 時は静的なグリッド表示のまま
    bg.parentElement.addEventListener('mousemove', function (e) {
      var r = bg.getBoundingClientRect();
      tx = e.clientX - r.left; ty = e.clientY - r.top;
      start();
    });
    bg.parentElement.addEventListener('mouseleave', function () { tx = -999; ty = -999; start(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else { cancelAnimationFrame(raf); raf = 0; }
    }).observe(bg);
  });
})();

使い方のコツ

マスの大きさは data-size、光が届く範囲はJS内の R（半径）で調整します。カーソルが追いつくとループが自動で止まる省エネ設計です。タッチ環境では静かなグリッドとして表示されるので、装飾としても破綻しません。

HERO TITLEオーロラ・ブロブ

オーロラ・ブロブ

<!-- 暗い背景色の親（section等）に position:relative を付けて先頭に置く。
     上に載せる見出しや本文は position:relative; z-index:1 に -->
<div class="bnto-bgaura" data-bnto-bgaura data-count="3" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgaura {
  --c1: hsl(265 85% 60%);  /* 色塊1の色 */
  --c2: hsl(180 80% 55%);  /* 色塊2の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
/* 1塊＝JSが生成する i 要素。ぼかし＋screen合成で重なりが溶け合う */
.bnto-bgaura i {
  position: absolute; top: 0; left: 0;
  border-radius: 50%; filter: blur(30px);
  opacity: .75; mix-blend-mode: screen;
  will-change: transform;
}
.bnto-bgaura i:nth-child(odd)  { background: var(--c1); }
.bnto-bgaura i:nth-child(even) { background: var(--c2); }
/* 上に載せる文字の可読性を守る暗めオーバーレイ */
.bnto-bgaura::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(9, 13, 25, .38);
}

// ぼかした色塊がサイン合成のランダム軌道で漂う（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgaura]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var count = Math.min(parseInt(bg.dataset.count, 10) || 3, 5);   // 色塊の数（2〜3個が目安）
    var blobs = [], W = 0, H = 0, t = Math.random() * 100, raf = 0, shown = true;
    for (var i = 0; i < count; i++) {
      var el = document.createElement('i');
      bg.appendChild(el);
      blobs.push({   // 周波数・位相・振幅はすべてランダム＝繰り返し感のない軌道
        el: el,
        f1: .18 + Math.random() * .2, f2: .07 + Math.random() * .12,
        p1: Math.random() * 6.28, p2: Math.random() * 6.28,
        ax: .22 + Math.random() * .16, ay: .18 + Math.random() * .16,
        cx: .2 + Math.random() * .6, cy: .25 + Math.random() * .5,
        s: .7 + Math.random() * .5   // 大きさ（親の短辺に対する比率）
      });
    }
    function resize() {
      W = bg.clientWidth; H = bg.clientHeight;
      var base = Math.min(W, H);
      blobs.forEach(function (b) {
        b.el.style.width = b.el.style.height = Math.round(base * b.s) + 'px';
      });
    }
    function place() {   // 2つのサイン波を合成して有機的にゆらす
      blobs.forEach(function (b) {
        var d = parseFloat(b.el.style.width) || 0;
        var x = (b.cx + Math.sin(t * b.f1 + b.p1) * b.ax + Math.sin(t * b.f2 * 1.7 + b.p2) * b.ax * .5) * W - d / 2;
        var y = (b.cy + Math.cos(t * b.f2 + b.p2) * b.ay + Math.sin(t * b.f1 * .8 + b.p1) * b.ay * .5) * H - d / 2;
        b.el.style.transform = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px)';
      });
    }
    function tick() { t += .016; place(); raf = requestAnimationFrame(tick); }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize(); place();   // reduced-motion 時はこの静止配置のまま
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); place(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); place(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

色は --c1 / --c2、数は data-count、にじみ具合はCSSの blur(30px) で調整します（大きなヒーローでは50〜80pxがおすすめ）。CSSのkeyframesだけで作るブロブと違い、軌道をランダムなサイン波の合成で描くため、何秒眺めても同じ動きの繰り返しになりません。文字の可読性は ::after の暗めオーバーレイで確保しています（濃さは .38 を調整）。

DIGITALデジタルレイン

デジタルレイン

<!-- 暗い背景色の親（section等）に position:relative を付けて先頭に置く。
     上に載せる中身は position:relative; z-index:1 に -->
<div class="bnto-bgmatrix" data-bnto-bgmatrix aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgmatrix {
  --c1: hsl(150 70% 62%);  /* 文字の色 */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bgmatrix canvas { display: block; width: 100%; height: 100%; }

(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  // 暗い親要素に流れ落ちるデジタルレイン（複数設置OK・二重実行OK）
  var GLYPHS = 'ｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂ0123456789ABCDEF';
  document.querySelectorAll('[data-bnto-bgmatrix]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var W = 0, H = 0, step = 14, cols = 0, drops = [], raf = 0, shown = true;
    function resize() {
      var dpr = window.devicePixelRatio || 1;
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      cols = Math.ceil(W / step);
      drops = [];
      for (var i = 0; i < cols; i++) drops[i] = Math.random() * -25;
    }
    function frame() {
      ctx.fillStyle = 'rgba(15, 29, 49, .25)';
      ctx.fillRect(0, 0, W, H);
      // --c1 をフレーム毎に読むのでシャッフルが即反映される
      var col = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#49E39B';
      ctx.font = '700 13px monospace';
      ctx.fillStyle = col;
      for (var i = 0; i < cols; i++) {
        var ch = GLYPHS.charAt(Math.floor(Math.random() * GLYPHS.length));
        var y = drops[i] * step;
        ctx.fillText(ch, i * step, y);
        if (y > H && Math.random() > .975) drops[i] = Math.random() * -12;
        drops[i] += .5;
      }
      raf = requestAnimationFrame(frame);
    }
    function paintStatic() {
      ctx.fillStyle = '#0F1D31'; ctx.fillRect(0, 0, W, H);
      ctx.fillStyle = getComputedStyle(bg).getPropertyValue('--c1').trim() || '#49E39B';
      ctx.font = '700 13px monospace'; ctx.globalAlpha = .8;
      for (var i = 0; i < cols; i++) ctx.fillText(GLYPHS.charAt(i % GLYPHS.length), i * step, (i % 8 + 2) * step);
      ctx.globalAlpha = 1;
    }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(frame); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize();
    if (reduced) paintStatic();
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); if (reduced) paintStatic(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); });
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      // 画面外では停止（パフォーマンス配慮）
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

文字が上から降り続けるサイバーな演出です。文字の種類はJS内の GLYPHS、落ちる速さは drops[i] += .5 で調整できます。--c1 で色を変えられ、シャッフルにも対応します。ネイビーや黒に近い暗い親要素に敷くと、いちばん映えます。

CELEBRATION舞う紙吹雪

舞う紙吹雪

<!-- 親（section等）に position:relative を付けて先頭に置く。
     data-count は舞う紙片の枚数 -->
<div class="bnto-bgconfetti" data-bnto-bgconfetti data-count="60" aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要） */
.bnto-bgconfetti {
  --c1: hsl(210 85% 62%);  /* 基調となる色（前後で色相をずらして配色） */
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
}
.bnto-bgconfetti canvas { display: block; width: 100%; height: 100%; }

// ゆっくり舞い落ちる紙吹雪の常時背景（複数設置OK・二重実行OK）
(function () {
  var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('[data-bnto-bgconfetti]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    var canvas = document.createElement('canvas');
    bg.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var count = parseInt(bg.dataset.count, 10) || 60;
    var bits = [], W = 0, H = 0, raf = 0, shown = true, baseHue = 210;
    function readHue() {   // --c1 の色相を基調色として拾う
      var v = getComputedStyle(bg).getPropertyValue('--c1').trim();
      var m = v.match(/hsl\(\s*([\d.]+)/);
      if (m) { baseHue = parseFloat(m[1]); return; }
      var c = v.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
      if (!c) return;
      var r = +c[1] / 255, g = +c[2] / 255, b = +c[3] / 255;
      var mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn, hu = 0;
      if (d) {
        if (mx === r) hu = (g - b) / d;
        else if (mx === g) hu = (b - r) / d + 2;
        else hu = (r - g) / d + 4;
        hu = (hu * 60 % 360 + 360) % 360;
      }
      baseHue = hu;
    }
    function resize() {
      var dpr = window.devicePixelRatio || 1;
      W = bg.clientWidth; H = bg.clientHeight;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function make(y) {
      return {
        x: Math.random() * W, y: y,
        w: 5 + Math.random() * 6, h: 8 + Math.random() * 7,
        vy: .4 + Math.random() * .9, sway: .6 + Math.random() * 1.2,
        ph: Math.random() * 6.28, rot: Math.random() * 6.28,
        vr: (Math.random() - .5) * .12,
        hoff: Math.random() * 120 - 60
      };
    }
    function seed() {
      readHue(); bits = [];
      for (var i = 0; i < count; i++) bits.push(make(Math.random() * H));
    }
    function draw() {
      ctx.clearRect(0, 0, W, H);
      bits.forEach(function (b) {
        ctx.save();
        ctx.translate(b.x, b.y); ctx.rotate(b.rot);
        ctx.globalAlpha = .85;
        ctx.fillStyle = 'hsl(' + (baseHue + b.hoff) + ' 80% 62%)';
        ctx.fillRect(-b.w / 2, -b.h / 2, b.w, b.h);
        ctx.restore();
      });
      ctx.globalAlpha = 1;
    }
    function tick() {
      readHue();
      bits.forEach(function (b) {
        b.ph += .02;
        b.y += b.vy; b.x += Math.sin(b.ph) * b.sway; b.rot += b.vr;   // ひらひら横ゆれ
        if (b.y - b.h > H) { var n = make(-10); for (var k in n) b[k] = n[k]; }   // 落ちきったら上へ戻す
      });
      draw();
      raf = requestAnimationFrame(tick);
    }
    function start() { if (!raf && shown && !reduced) raf = requestAnimationFrame(tick); }
    function stop() { cancelAnimationFrame(raf); raf = 0; }
    resize(); seed(); draw();   // reduced-motion 時はこの静止画のまま
    if ('ResizeObserver' in window) new ResizeObserver(function () { resize(); draw(); }).observe(bg);
    else window.addEventListener('resize', function () { resize(); draw(); });
    // 画面外にいるあいだは停止（パフォーマンス配慮）
    if ('IntersectionObserver' in window) new IntersectionObserver(function (en) {
      shown = en[0].isIntersecting;
      if (shown) start(); else stop();
    }).observe(bg);
    else start();
  });
})();

使い方のコツ

枚数は data-count で調整します。モバイルでは40枚前後に抑えるのがおすすめです。色は --c1 の色相を基調に、前後へ色相をずらしてカラフルに配色しています。紙片が画面下に落ちきると自動で上へ戻るので、常時背景として置き続けても枚数が増えません。お祝い・記念・キャンペーン達成の演出に向いています。

TIME OF DAY時間帯で変わる空

時間帯で変わる空

<!-- 親（section等）に position:relative を付けて先頭に置く。
     アクセス時刻に応じて data-time が付き、CSSで色が切り替わる -->
<div class="bnto-bgsky" data-bnto-bgsky aria-hidden="true"></div>

/* 親要素いっぱいに広がる背景レイヤー（親に position:relative が必要）。
   JSが付ける data-time でグラデーションを切り替える */
.bnto-bgsky {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  transition: background 1.2s ease;
}
.bnto-bgsky[data-time="morning"] { background: linear-gradient(180deg, #FFE8C2, #FFC9A3 55%, #F7A98C); }
.bnto-bgsky[data-time="day"]     { background: linear-gradient(180deg, #7EC8F2, #BEE6FB 60%, #EAF7FF); }
.bnto-bgsky[data-time="evening"] { background: linear-gradient(180deg, #3B4C86, #B8567A 55%, #F0A45B); }
.bnto-bgsky[data-time="night"]   { background: linear-gradient(180deg, #0A1230, #132349 60%, #1E2E5A); }

// アクセス時刻から朝/昼/夕/夜を判定して data-time を付ける
// （デモ用に時間帯切替ボタンも生成。本番では btns 生成部分を消してOK）
(function () {
  document.querySelectorAll('[data-bnto-bgsky]').forEach(function (bg) {
    if (bg.dataset.bntoInit) return;
    bg.dataset.bntoInit = '1';
    function byHour(h) {
      if (h >= 5 && h < 10) return 'morning';
      if (h >= 10 && h < 16) return 'day';
      if (h >= 16 && h < 19) return 'evening';
      return 'night';
    }
    bg.dataset.time = byHour(new Date().getHours());   // アクセス時刻で初期表示
    // ↓ デモ用の切替ボタン（本番では不要なら削除）
    var labels = { morning: '朝', day: '昼', evening: '夕', night: '夜' };
    var box = document.createElement('div');
    box.className = 'bnto-skybtns';
    Object.keys(labels).forEach(function (key) {
      var b = document.createElement('button');
      b.type = 'button'; b.textContent = labels[key];
      b.setAttribute('aria-pressed', bg.dataset.time === key ? 'true' : 'false');
      b.addEventListener('click', function () {
        bg.dataset.time = key;
        box.querySelectorAll('button').forEach(function (o) { o.setAttribute('aria-pressed', 'false'); });
        b.setAttribute('aria-pressed', 'true');
      });
      box.appendChild(b);
    });
    box.style.pointerEvents = 'auto';   // 親が pointer-events:none でもボタンは押せるように
    bg.parentElement.appendChild(box);
  });
})();

使い方のコツ

時間帯の境目はJS内の byHour の時刻（5・10・16・19時）で調整できます。各時間帯の色はCSSの data-time セレクタで自由に変えられます。デモでは切替ボタンを表示していますが、本番ではボタン生成部分を削除すれば、アクセス時刻に応じた空だけが表示されます。時報系サービスや、時間で表情を変えたいトップページに向いています。

JS動く背景エフェクトの基礎知識

動く背景エフェクトは、ヒーローやセクションの背後でゆっくり動き続ける装飾で、ページの第一印象と世界観づくりに大きく効きます。パーティクル・波・雪・星空といった定番演出は本来それなりのコード量が必要ですが、このページのサンプルはすべて依存ライブラリなしのバニラJavaScriptで、jQueryもフレームワークも不要です。

使い方は、HTML / CSS / JSの3タブをそれぞれ貼り付けるか、「全部コピー」ボタンでひとまとめになったコードを1回貼り付けるだけです。背景レイヤーは position: absolute で親いっぱいに広がる作りなので、敷きたいセクションに position: relative を付けて、その先頭に置いてください。初期化は data-bnto-* 属性の自動検出式なので、同じページに何個置いても、うっかりコードを2回貼っても壊れません。

canvasが背景演出に向く理由

数十個の粒子をDOM要素として個別に動かすと、要素数もスタイル計算もかさんでしまいます。canvas なら1枚の描画面に何十個の粒子でもまとめて描けるため、パーティクルやネットワーク線のような「粒がたくさん動く」演出と好相性です。このページのcanvas系パーツはすべて devicePixelRatio に対応しているのでRetina環境でもにじまず、ResizeObserverで親要素のサイズ変更にも自動で追従します。

パフォーマンスの注意点（粒子数・画面外停止・reduced-motion）

背景アニメーションは「動き続ける」性質上、実装しだいでCPUを消費し続けます。サンプルはすべて requestAnimationFrame で描画し、IntersectionObserverで画面外に出たあいだは完全に停止します。粒子の数は data-count 属性で調整できるので、モバイルでは少なめの値にするのがおすすめです。また、OSで「視差効果を減らす」を設定している閲覧者（prefers-reduced-motion）には、アニメーションを行わず初期配置の静止表示だけを行います。

文字の可読性を邪魔しない濃度

背景エフェクトはあくまで脇役です。粒子や波の不透明度を上げすぎると、上に載せた見出しや本文が読みにくくなってしまいます。サンプルはいずれも薄めの透明度を初期値にしていますが、実際のコンテンツを載せた状態で濃度（opacity やJS内のalpha値）を確認し、テキストとのコントラストが十分に保てる範囲で調整してください。文字の直下だけ半透明の帯を敷くのも有効です。

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

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

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

よくある質問

コピーした背景エフェクトはそのまま動きますか？

はい。「全部コピー」を押すとHTML・CSS・JSがひとつの自己完結ブロックになってコピーされます。position:relative を付けた親要素（セクションやヒーロー）の中に貼り付けるだけで動き、ライブラリの読み込みは一切不要です。

背景アニメーションはページを重くしませんか？

各パーツは requestAnimationFrame で描画し、IntersectionObserver によって画面外にあるあいだは自動で停止します。粒子の数も data-count 属性で減らせるので、負荷を抑えて使えます。

スマホやRetinaディスプレイでもきれいに表示されますか？

表示されます。canvas系のパーツは devicePixelRatio に対応しているため高解像度でもにじまず、親要素のサイズ変更にも自動で追従します。マウス追従系のパーツは、タッチ環境では初期状態の静かな表示のままになります。

動きが苦手な閲覧者への配慮はできますか？

できます。OSで「視差効果を減らす」を設定している閲覧者（prefers-reduced-motion）には、アニメーションを行わず初期配置の静止表示だけを行うように実装済みです。

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

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

JS動く背景エフェクト 12選

浮遊パーティクル

ネットワーク線

マウス追従グラデーション

ウェーブ

降る雪

上昇する泡

星空またたき

スポットライトグリッド

オーロラ・ブロブ

デジタルレイン

舞う紙吹雪

時間帯で変わる空

JS動く背景エフェクトの基礎知識

canvasが背景演出に向く理由

パフォーマンスの注意点（粒子数・画面外停止・reduced-motion）

文字の可読性を邪魔しない濃度

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

よくある質問

関連カテゴリ