【JavaScript】動く雲っぽいものを表示する

Tweet

Category JavaScript 2014/07/07

問題

ブラウザで、流れていく雲のアニメーションみたいなのを表示したいです。

答え

領域の大きさ、背景色は、CSSかstyle属性で指定してやってください。IDはskyにした。

HTML

<div id="sky" style="width:100%; height:100px; background-color:#3E83C8;"></div>

cloud1.png と cloud2.png は適当なもこもこした半透明のPNG画像を用意してください。

JavaScript

$(function(){
	//中に入る雲を position:absolute するので
	$('#sky').css({position:"relative", overflow:"hidden"});

	//指定されたURLの画像の雲をskyの中に置く
	function addObject(url)
	{
		var speed = 30000 + Math.floor(Math.random() * 30000); 
		var top = -100 + Math.floor(Math.random() * 200); 
		var $div = $("<div>").css({"position":"absolute", "top":top,"left": "-200px"}).animate({
			left:$("#sky").width()
		},speed,"linear",function(){
			$(this).remove();
		})
		$div.append('<img src="' + url + '">');
		$("#sky").append($div);
	}

	//timer
	(function t() {
		if ($('#sky div').length > 100) {
			setTimeout(t, 500);
		} else {
			if (Math.random() < 0.20) {
				addObject("./cloud1.png");
			}
			if (Math.random() < 0.10) {
				addObject("./cloud2.png");
			}
			setTimeout(t, 100);
		}
	})();
});