ランダムに浮かび上がるスプラッシュをjQueryで作ってみました。

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

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

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

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

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

		$(".splash").css({
			"opacity": "0",
			"position": "absolute"
		});

		$(".splash").each(function () {
			var $this = $(this);
			splashSize = Math.ceil(Math.random() * 10);
			splashSize2 = Math.ceil(Math.random() * 4);
			splashColor = Math.ceil(Math.random() * 6);
			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": splash * splashSize * splashSize2 + "px",
				"height": splash * splashSize * splashSize2 + "px",
				"background": splashColor,
				"left": splashPositionX + "%",
				"top": splashPositionY + "%"
			});

			$(this).delay(splashSize * 100).fadeTo(500, 0.7, function () {
				$this.fadeOut(500, function () {
					$this.remove();
				});
			});
			v++;
		});
	}

	splashMotion();

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

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

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

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

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

デモページは、こちら