AI向け説明 AI Description

背景に浮遊するパーティクルをJavaScriptで動的に生成し、CSSアニメーションで制御します。各パーティクルはランダムな縦横位置、遅延時間、速度を持ち、`@keyframes float`で現在位置から上下・左右に移動します。パーティクル数はパフォーマンスを考慮して調整可能にします。

Floating particles in the background are generated dynamically with JavaScript and controlled via CSS animations. Each particle has random horizontal and vertical position, delay, and speed, moving up/down and left/right from their current position with `@keyframes float`. Particle count is adjustable for performance considerations.

調整可能パラメータ Adjustable Parameters

• --particle-count — 表示するパーティクルの数 number of particles to display
• --particle-size — パーティクルのサイズ size of each particle
• --particle-speed — アニメーションの速度（秒） animation duration (seconds)
• particle color — パーティクルの色と透明度 particle color and opacity
• random position — パーティクルの縦横ランダム配置 random horizontal and vertical positioning
• --translate-x — 水平方向の移動距離 horizontal movement distance

実装 Implementation

HTML + CSS + JS

<div class="particle-stage" data-particle-stage>
  <div class="particle-content">Content</div>
</div>

<style>
.particle-stage {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float 20s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}
</style>

<script>
const stage = document.querySelector("[data-particle-stage]");
const count = 50;

function createParticle() {
  const particle = document.createElement("div");
  particle.className = "particle";
  particle.style.left = Math.random() * 100 + "%";
  particle.style.top = Math.random() * 100 + "%";
  particle.style.animationDelay = Math.random() * 20 + "s";
  particle.style.animationDuration = (15 + Math.random() * 10) + "s";
  particle.style.setProperty("--translate-x", (Math.random() - 0.5) * 200 + "px");
  return particle;
}

for (let i = 0; i < count; i++) {
  stage.appendChild(createParticle());
}
</script>

React (JSX + CSS)

// react/M-006.jsx
import { useEffect, useRef } from "react";
import "./M-006.css";

export default function ParticleBackground({ count = 50 }) {
  const stageRef = useRef(null);

  useEffect(() => {
    const stage = stageRef.current;
    if (!stage) return;

    const particles = [];
    for (let i = 0; i < count; i++) {
      const particle = document.createElement("div");
      particle.className = "particle";
      particle.style.left = Math.random() * 100 + "%";
      particle.style.top = Math.random() * 100 + "%";
      particle.style.animationDelay = Math.random() * 20 + "s";
      particle.style.animationDuration = (15 + Math.random() * 10) + "s";
      particle.style.setProperty("--translate-x", (Math.random() - 0.5) * 200 + "px");
      stage.appendChild(particle);
      particles.push(particle);
    }

    return () => {
      particles.forEach(p => p.remove());
    };
  }, [count]);

  return (
    <div className="particle-stage" ref={stageRef}>
      <div className="particle-content">Content</div>
    </div>
  );
}

/* react/M-006.css */
.particle-stage {
  position: relative;
  overflow: hidden;
  min-height: 300px;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: float 20s linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(50px) translateX(0);
    opacity: 0;
  }
  10%, 90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) translateX(var(--translate-x, 0));
    opacity: 0;
  }
}