紙吹雪が舞うアニメーション ジェネレーター

<!-- 紙吹雪を演出するコンテナエリアとトリガーボタン -->
<div class="confetti-container">
	<button type="button" class="confetti-trigger">紙吹雪を降らせる</button>
</div>

/* 紙吹雪を包含するエリアのスタイル設定 */
.confetti-container {
	position: relative;
	width: 100%;
	min-height: 400px;
	background-color: #0f0f1a;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden; /* 紙吹雪が枠外に出ないように設定 */
}

/* トリガーボタンの基本スタイル */
.confetti-trigger {
	padding: 12px 24px;
	font-size: 16px;
	color: #fff;
	background-color: #ff69b4;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	z-index: 10; /* 紙吹雪より前面に表示させる */
	transition: background-color 0.2s;
}
.confetti-trigger:hover {
	background-color: #ff1493;
}

/* 動的追加される紙吹雪の基本クラス */
.confetti-piece {
	position: absolute;
	top: -50px;
	pointer-events: none; /* マウスクリックを透過させる設定 */
	animation: confetti-fall linear forwards;
}

/* 落下と左右の揺れ、ランダムな3D回転を表現するアニメーション */
@keyframes confetti-fall {
	0% {
		transform: translateY(0) rotate3d(1, 1, 1, 0deg);
	}
	100% {
		transform: translateY(450px) rotate3d(1, 1, 1, 360deg);
	}
}

(() => {
	// トリガーとなるボタンと包含コンテナを取得
	const container = document.querySelector('.confetti-container');
	const trigger = document.querySelector('.confetti-trigger');
	if (!container || !trigger) return;

	// 紙吹雪を表現するためのカラーバリエーション定義
	const colors = ['#FF69B4', '#1E90FF', '#00FA9A', '#F0E68C', '#FF8C00', '#DA70D6'];

	const spawnBatch = () => {
		const count = {{confetti_count}};

		for (let i = 0; i < count; i++) {
			const confetti = document.createElement('div');
			confetti.classList.add('confetti-piece');

			// ランダムなサイズ算出（最小サイズ〜最大サイズ）
			const min = {{min_size}};
			const max = {{max_size}};
			const size = Math.floor(Math.random() * (max - min + 1)) + min;
			confetti.style.width = `${size}px`;
			confetti.style.height = `${Math.random() > 0.5 ? size : size * 0.6}px`; /* 正方形と長方形をランダムに指定 */

			// ランダムな背景色の適用
			confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];

			// 横方向の初期位置と落下ディレイ、速度の設定
			confetti.style.left = `${Math.random() * 100}%`;
			const delayRange = {{delay_range}};
			const delay = Math.random() * delayRange; /* 設定された間隔の範囲内でランダムに遅延させる */
			confetti.style.animationDelay = `${delay}s`;

			// 基準の落下速度にランダムな揺らぎを加える
			const baseDuration = {{duration}};
			const randomDuration = baseDuration + (Math.random() * 1.0 - 0.5);
			confetti.style.animationDuration = `${randomDuration}s`;

			// 要素をコンテナに追加
			container.appendChild(confetti);

			// アニメーション完了後にDOMから自動削除
			setTimeout(() => {
				confetti.remove();
			}, (delay + randomDuration) * 1000);
		}
	};

	// ボタンクリック時にバッチを開始し、以降は delay_range 秒ごとに繰り返す（無限ループ）
	trigger.addEventListener('click', () => {
		spawnBatch();
		setInterval(spawnBatch, {{delay_range}} * 1000);
	});
})();