桜が舞うアニメーション ジェネレーター

<!-- 桜が舞い散るコンテナエリアとトリガーボタン -->
<div class="sakura-container">
	<button type="button" class="sakura-trigger">桜を降らせる</button>
</div>

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

/* トリガーボタンの基本スタイル */
.sakura-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;
}
.sakura-trigger:hover {
	background-color: #ff1493;
}

/* 動的追加される花びらの基本クラス */
.sakura-piece {
	position: absolute;
	top: -50px;
	pointer-events: none; /* マウスクリックを透過させる設定 */
	background-color: #ffb7c5; /* 桜色のベースカラー */
	border-radius: 100% 0 100% 100%; /* 花びら特有の非対称なカーブ */
	transform-origin: left top;
	animation: sakura-fall linear forwards;
}

/* 落下と風による左右の揺れ、ひらひら回る3D回転を表現するアニメーション */
@keyframes sakura-fall {
	0% {
		transform: translateY(0) rotate(var(--start-deg, 0deg)) rotateY(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 0.9;
	}
	100% {
		transform: translateY(450px) translateX(var(--drift-px, {{wind_strength}}px)) rotate(var(--end-deg, 360deg)) rotateY(1440deg);
		opacity: 0;
	}
}

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

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

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

			// ランダムなサイズ算出（最小サイズ〜最大サイズ）
			const min = {{min_size}};
			const max = {{max_size}};
			const size = Math.floor(Math.random() * (max - min + 1)) + min;
			petal.style.width = `${size}px`;
			petal.style.height = `${size * 0.75}px`; /* 横長の花びら形状に調整 */

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

			// 基準の落下速度にランダムな揺らぎを加える（±1.5秒のランダム幅）
			const baseDuration = {{duration}};
			const randomDuration = baseDuration + (Math.random() * 3.0 - 1.5);
			petal.style.animationDuration = `${randomDuration}s`;

			// 角度のランダム設定（初期角度: 0〜360度、回転終了角度: 360〜720度）
			const startDeg = Math.floor(Math.random() * 360);
			const endDeg = startDeg + 360 + Math.floor(Math.random() * 360);
			petal.style.setProperty('--start-deg', `${startDeg}deg`);
			petal.style.setProperty('--end-deg', `${endDeg}deg`);

			// 落下方向・風の影響のランダム設定（設定した風の強さを最大値として、左右にランダムに散らす）
			const maxWind = {{wind_strength}};
			const drift = (Math.random() * 2 - 1) * maxWind; // -maxWind 〜 +maxWind の範囲でランダム
			petal.style.setProperty('--drift-px', `${drift}px`);

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

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

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