Живой фон на Jquery. Часть 1

Не так давно загорелся идеей создания на своем сайте живого фона, который бы изменял бы свои свойства с течением времени. Идея была такая, что если человек заходит на сайт ночью, то видит на сайте тоже ночь, днем – день, вечером – вечер, зимой – зиму и т.д. Задача была сложной т.к. нигде ничего подобного я не встречал и обычное “загуглить” не помогло.
Т.к. привык в жизни делать все сам, то вооружившись учебником по Jquery, приступил к работе.

Первое, что я решил реализовать стали облака, которые бы плыли на фоне сайта в течение дня.
По причине того, что не хотелось захломлять код сайта облака генерируются скриптом через заданное количество времени

/*Облака*/
var arr=new Array();
arr[0]="0 0";
arr[1]="-380px 0";
arr[2]="-815px 0";
arr[3]="0 -190px";
arr[4]="-190px -380px";
arr[5]="-190px -800px";
var i=0;
var h = $(window).width();
setInterval(function(){
i++;
$('body').append('<div class="oblaka'+i+'"></div>');
$ ('.oblaka'+i).css({'background':'url(images/oblaka.png) no-repeat','backgroundPosition':function(){
	var beg=0;
	var end=5;
	var val=Math.random()*(end-beg+1);
	val=Math.floor(val)+beg;
	return arr[val];},'top':function(){
	var beg=100;/*Диапазон*/
	var end=180;/*в px появления облаков*/
	var val=Math.random()*(end-beg+1);
	val=Math.floor(val)+beg;
	return val+'px'; 
	},'left':'-350px'});
$('.oblaka'+i).animate({'left':h},{duration: 100000, queue:false, easing: 'linear'});
    },4000);

Как видно из кода, в тег каждые 4 секунды добавляется тег <div class=’oblaka i’>, где i номер облака, который необходим для их последующего удаления. Далее облаку присваиваются css свойства, в которых путем генерации случайного числа выбирается номер элемента массива. В каждом из элементов хранятся числа, указывающие backgraund-position для спрайта с шестью облаками. Свойство left указывает начальное положение облака за экраном, координата top также выбирается случайным образом. Дальше облако движется в сторону на расстояние равное ширине окна в течение 100 секунд.
Для того чтобы в момент загрузки страницы не приходилось ждать когда облака выплывут было придумано следующее

 id = setInterval(function(){
i++;
$('body').append('<div class="oblaka'+i+'"></div>');
$ ('.oblaka'+i).css({'background':'url(images/oblaka.png) no-repeat','backgroundPosition':function(){
var beg=0;
var end=5;
var val=Math.random()*(end-beg+1);
val=Math.floor(val)+beg;
return arr[val];},'top':function(){
	var beg=100;/*Диапазон*/
	var end=180;/*в px появления облаков*/
	var val=Math.random()*(end-beg+1);
	val=Math.floor(val)+beg;
	return val+'px'; 
	},'left':i*100}).animate({'left':h},{duration: speed/*скорость*/, queue:false, easing: 'linear'});

if (i==10){
	clearTimeout(id);
}
},0)

Весь смысл этого куска кода состоит в том, что с помощью функции setInterval() создается 10 облаков, а с помощью clearTimeout(id); цикл завершается.
Для того, чтобы облака не скапливались после того как каждое облако зайдет за край экрана оно удаляется с помощью следующей конструкции:

setTimeout(function(){
	setInterval(function(){
	a++;
	$('.oblaka'+a).remove();
	},4000);
	},100000);//через это время начнут удаляться

Облака созданы.
Какие же облака без солнца? Вот и оно

$('body').append('<div class="sun"></div>');
	setTimeout(function(){
	$('.sun').animate({rotate: '+=360deg'},{duration: 20000, queue:false, easing: 'linear'});	
		},0)
	setInterval (function() { 
	$('.sun').animate({rotate: '+=360deg'},{duration: 20000, queue:false, easing: 'linear'});},20000)

Солнце вращается с помощью плагина трансформации.
На протяжении дня градиент, на котором расположен сайт изменяется, а солнце поднимается выше. Об остальных эффектах в следующих постах.

Указанный эффект и не только можно посмотреть здесь.

Вот скрин: