ランダムに浮かび上ってはじけるシャボン玉風のスプラッシュをjQueryで作ってみました。

読み込みが完了すると自動で開始します。

↓以下が実際のソースサンプルです。

<script>
$(function () {
	var i = 0,
		v = 1,
		splash;

	function splashMotion() {
		i = 0;
		v = 1;
		splash = Math.ceil(Math.random() * 6) + 6;

		while (i < splash) {
			$("#main").prepend("<div class='splash'></div>");
			i++;
		}

		$(".splash").each(function () {
			var $this = $(this);
			splashSize = Math.ceil(Math.random() * 4) + 10;
			splashSize2 = Math.ceil(Math.random() * 4);
			splashColor = Math.ceil(Math.random() * 6);
			splashTime = Math.ceil(Math.random() * 7) + 7;
			splashPositionX = Math.ceil(Math.random() * 100);
			splashPositionY = Math.ceil(Math.random() * 100);

			if (splashColor === 1) {
				splashColor = "#f00";
			} else if (splashColor === 2) {
				splashColor = "#0f0";
			} else if (splashColor === 3) {
				splashColor = "#00f";
			} else if (splashColor === 4) {
				splashColor = "#ff0";
			} else if (splashColor === 5) {
				splashColor = "#f0f";
			} else {
				splashColor = "#0ff";
			}

			$(this).css({
				"width": "0",
				"height": "0",
				"background": splashColor,
				"left": splashPositionX + "%",
				"top": splashPositionY + "%"
			});

			$(this).delay(v * 100).animate({
				"width": (splash * splashSize * splashSize2) / 3 + "px",
				"height": (splash * splashSize * splashSize2) / 3 + "px",
				"margin-left": "-" + (((splash * splashSize * splashSize2) / 3) / 2) + "px",
				"margin-top": "-" + (((splash * splashSize * splashSize2) / 3) / 2) + "px",
				"opacity": "0.6"
			}, 400, function () {
				$this.animate({
					"width": (splash * splashSize * splashSize2) + "px",
					"height": (splash * splashSize * splashSize2) + "px",
					"margin-left": "-" + ((splash * splashSize * splashSize2) / 2) + "px",
					"margin-top": "-" + ((splash * splashSize * splashSize2) / 2) + "px",
					"opacity": "0"
				}, 300, function () {
					$this.remove();
				});
			});
			v++;
		});
	}

	splashMotion();

	setInterval(function () {
		splashMotion();
	}, 2300);
});
</script>

<style>
		* {
			margin: 0;
			padding: 0;
			border: 0;
		}

		#main {
			position: relative;
			width: 100%;
			height: 600px;
			overflow: hidden;
		}

		.splash {
			position: absolute;
			z-index: 0;
			border-radius: 50%;
			opacity: 0;
		}
</style>

<div id="main">
</div>

デモページは、こちら