波紋アニメーション ジェネレーター

<!-- 波紋エフェクトを発生させるエリア -->
<div class="ripple-area">
	<span>ここをクリックしてください</span>
</div>

/* 波紋を発生させるコンテナエリアのスタイル */
.ripple-area {
	position: relative;
	width: 100%;
	min-height: 300px;
	background-color: #1a1a1a;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	overflow: hidden; /* 波紋のはみ出しを防ぐ設定 */
	user-select: none;
}

/* 動的生成される波紋要素の基本スタイル */
.ripple-effect {
	position: absolute;
	border-radius: 50%;
	background-color: {{color}};
	pointer-events: none; /* 波紋自体がクリックを阻害しないための設定 */
	transform: translate(-50%, -50%) scale(0);
	animation: ripple-animation {{duration}}s ease-out forwards;
}

/* 波紋が広がりながら消えていくアニメーション定義 */
@keyframes ripple-animation {
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

(() => {
	// 波紋を発生させる対象エリアを取得
	const area = document.querySelector('.ripple-area');
	if (!area) return;

	// エリアがクリックされた際の処理
	area.addEventListener('click', (e) => {
		// すでに波紋要素が存在する場合は即座に消せるよう、動的生成
		const ripple = document.createElement('div');
		ripple.classList.add('ripple-effect');

		// 波紋のサイズ定義
		const size = {{ripple_size}};
		ripple.style.width = `${size}px`;
		ripple.style.height = `${size}px`;

		// クリック座標を取得し、エリア内相対座標に変換
		const rect = area.getBoundingClientRect();
		const x = e.clientX - rect.left;
		const y = e.clientY - rect.top;

		// スタイルプロパティに座標と初期不透明度をセット
		ripple.style.left = `${x}px`;
		ripple.style.top = `${y}px`;
		ripple.style.opacity = '{{opacity}}';

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

		// アニメーション終了後にDOMから要素を自動削除
		setTimeout(() => {
			ripple.remove();
		}, {{duration}} * 1000);
	});
})();