Создание анимированных открыток с помощью jQuery

Попробуем создать красивую непрерывную анимацию как в Flash, но без его использования. Которую можно будет использовать для шапки сайта или какой нибудь открытки не знаю зависит от фантазии. В этом уроке мы рассмотрим использование непрерывной анимации которая может использоваться в любом месте. А получим непрерывную анимацию функцией setTimeout(), а также будем использовать jQuery плагин под названием Easing plugin, ну об этом в свое время пока можете посмотреть демо:

HTML

Наша Html разметка будет простенькой, создаем холст, то есть область в которой будут располагаться наши анимированные элементы иметь наш холст будет id=”content” располагаться он будет в div’e с id=”wrapper” для позиционирования, а внутри нашего так называемого холста будут располагаться картинки которые благодаря javascript’у будут двигаться или еще че нибудь. Вот код

<div id="wrapper">
   <div id="content">
      <div id="sun"><img src="images/sun.gif"/></div>
      <div id="cloud1"><img src="images/cloud1.png"></div>
      <div id="cloud2"><img src="images/cloud2.png"></div>
      <div id="cloud3"><img src="images/cloud3.png"></div>
      <div id="raft"><img src="images/raft.png"></div>
      <div id="raftripple"><img src="images/raftripple.gif"></div>
      <div id="greetings"><img src="images/greetings.png"></div>
      <div id="stamp"><img src="images/stamp.png"></div>
   </div>
</div>

CSS

Следующим шагом будет написание CSS кода, расположить наши картинки, указать размеры и т.д. Вот код, читаем комментарии:

*{ margin:0; padding:0; }
body { text-align: center; background: #111; }

/* Ширина должна совпадать с дочерним элементом #content */
#wrapper{ margin:0px auto; width:700px; }

/* На холст обязательно должен иметь следующие атрибуты position:relative/overflow:hidden */
#content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); }
    /* распологаем наше солнце в нужном месте */
	#sun{ position:absolute; top:10px; left:30px; }

	/*отрицательные значения указываем для скрытия облаков, для последующего их выплывания */
	/* облака разбиты по слоям благодаря z-index чем он больше тем выше он будет находится */
	#cloud1{ position:absolute; top:60px; left: -150px; z-index:5; }
	#cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
	#cloud3{ position:absolute; top:25px; left: -100px; z-index:3; }

	#raft{ position:absolute; top:220px; left: 312px; z-index:20; }
	#raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }

	/* наш текст #greeting скорее это не текст а изображение с текстом, имеют похожие на облака стили... */
	#greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
	#stamp{ position:absolute; top:5px; left: 801px; z-index: 21; }

После проделанных шагов у вас должно получится что то вроде этого:

Подготавливаем jQuery

Добавляем в наш header следующий код:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Как вы заметили сам jQuery мы подключаем с самого сайта jQuery “http://jqueryjs.googlecode.com/files/jquery-1.3.2.js”, далее вам нужно скачать Easing Plugin и расположить его в той же директории что и ваша страница.

jQuery

Далее собственно начинаем писать сам javascript код для начала пишем следующий код который по истечению 300мс будет заново запускать определенную функцию в нашем случае это функция animation() которую мы затем создадим:

$(document).ready(function() {
	setTimeout("animation()",300);
});

Код означает то что после загрузки всех DOM элементов запуститься функция animation() и будет повторятся бесконечно каждые 300мс. Далее давайте напишем саму функцию animation(), выглядит она вот так:

function animation(){
	sun_raft();
	cloud1();
	cloud2();
	cloud3();
	$("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
	$("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'});
}

Функция запускает 4 функции sun_raft(), cloud1(), cloud2(), cloud3() затем применяет анимацию к двум элементам #greetings и #stamp , где применяется наш подключенный плагин Easing plugin он увеличивает количество возможных вариантов атрибута easing он отвечает за равномерность анимации в нашем случае наши штамп и текст будут как бы подпрыгивать. Далее пишем 4 функции запускающиеся в функции animation() это sun_raft() для солнца и плота, cloud1() cloud2() cloud3() – анимации для трех облаков. Пишем:

		function sun_raft(){//анимации для солнца и плота
			$("#sun").animate({opacity:"0.7"},1000).animate({opacity:"1"},1000);//солнце будет менять прозрачность
			$("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);//плот будет двигаться вверх вниз
			$("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);//волны также будут менять прозрачность
			setTimeout("sun_raft()",2000);//функция будет запускаться каждые 200мс
		}
		function cloud1(){//функция для первого облака
			$("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0);//будет двигаться от -150 лева до 850
			setTimeout("cloud1()",10000);//будет запускаться каждые 10000мс
		}
		function cloud2(){//аналогично для второго облака
			$("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0)
			setTimeout("cloud2()",9000);
		}
		function cloud3(){//и для третьего
			$("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0)
			setTimeout("cloud3()",6000);
		}

На рисунке показыны движения облаков: