Анимированный ландшафт с помощью CSS и JQuery

С появлением JQuery, многие разработчики, не слишком хорошо знакомые с javascript, начали использовать jQuery, благодаря большому количеству различных эффектов, поддерживаемых этим фреймворком. На сегодняшний день, JQuery является одним из самых популярных ява-скрипт-фреймворков. Такая его популярность объясняется простотой использования и наличием множества замечательных эффектов, для применения которых, не требуется углубленных знаний ява-скрипт. В сегодняшней статье, мы создадим анимированную картинку, с помощью CSS и JQuery.

Шаг 1. Подготовка файлов

Для начала, нам необходимо подготовить все файлы, необходимые для этого примера, затем создать один HTML-файл, один CSS-файл и папку, которая будет содержать все наши картинки.

Прежде, чем мы начнем, посмотрите демо.

Шаг 2. HTML-страница

Теперь, создадим HTML-разметку, которая будет содержать контейнер с фиксированной высотой и шириной, а внутри него будет еще один блок, содержащий все элементы нашей страницы. В результате, у нас получилась вот такая разметка:

<div id="wrapper">
<div id="inner">
    <div id="cloudone"><img src="images/clud1.png" alt="" /></div>
    <div id="cloudtwo"><img src="images/clud2.png" alt="" /></div>
    <div id="cloudthree"><img src="images/clud1.png" alt="" /></div>
    <div id="boat"><img src="images/boat.png" alt="" /></div>
</div>
</div>

Полная версия:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated Landscape Using CSS and jQuery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="inner">
    <div id="cloudone"><img src="images/clud1.png"></div>
    <div id="cloudtwo"><img src="images/clud2.png"></div>
    <div id="cloudthree"><img src="images/clud1.png"></div>
    <div id="boat"><img src="images/boat.png"></div>
</div>
</div>
</body>
</html>

Шаг 2. CSS-стили

Далее добавим немного CSS-стилей, без которых просто нельзя обойтись. Здесь следует обратить внимание на два момента – это свойство overflow: hidden, которое обязательно должно быть установлено для блока #inner, и абсолютное позиционирование, для всех, двигающихся картинок. На данном этапе, мы вынесем наши движущиеся изображения (облака и лодку) за пределы контейнера, путем установки отрицательных полей, с тем чтобы в дальнейшем, с помощью JQuery, получить красивый эффект. Далее CSS-код, необходимый для нашего примера:

#wrapper {
	width:800px;
	height:600px;
       /* main background image with sky, sun, river and ground */
	background-image:url(images/Untitled-3.jpg);
	background-repeat:no-repeat;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	border: 10px solid #666;
}
#inner {
	position:relative;
	overflow:hidden;
	width:800px;
	height:600px;
	margin:0px;
}
#cloudone {
	position:absolute;
	margin-top:2px;
	margin-left:-200px;
	filter:alpha(opacity=80);
  /* CSS3 standard */
        opacity:0.8;
}
#cloudtwo {
	position:absolute;
	margin-top:80px;
	margin-left:-300px;
	filter:alpha(opacity=60);
  /* CSS3 standard */
        opacity:0.6;
}
#cloudthree {
	position:absolute;
	margin-top:60px;
	margin-left:-600px;
	filter:alpha(opacity=70);
  /* CSS3 standard */
        opacity:0.7;
}
#boat {
	margin-top:360px;
	position:absolute;
	margin-left:800px;
}

Шаг 4. jQuery

Прежде всего, нам необходимо подключить jQuery, к нашей странице:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript">
</script>
<script src="landscape.js" type="text/javascript"></script>

Здесь, мы дважды будем использовать функцию .animate, для анимирования облаков и лодки. Кроме того, мы создадим специальную функцию для того, чтобы облака и лодка двигались по кругу. Смотрите пример ниже.

function cloudone(){
    $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
    setTimeout("cloudone()",10000);
}

В приведенном коде происходит следующее: с помощью первой функции .animate, мы двигаем объект #cloudone вправо, на 1200 пикселей, причем объект будет двигаться со скользящим эффектом, в течении 10 секунд. Далее, вторая функция .animate возвращает объект на исходную позицию, с интервалом 0 секунд. Для того, чтобы снова запустить анимацию, нам необходимо суммировать временные интервалы обоих функций .animate, и с помощью функции setTimeout, мы сможем снова запустить цикл вращения картинки. Таким образом, можно анимировать все картинки. Далее приведен код, для анимации остальных изображений:

function cloudone(){
   $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
   setTimeout("cloudone()",10000);
}
function cloudtwo(){
   $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
   setTimeout("cloudtwo()",15000);
}
function cloudthree(){
   $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
   setTimeout("cloudthree()",20000);
}
function boat(){
   //This time we need to move boat to left side so we put the margin to 1000px
   $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
   setTimeout("boat()",20000);
}

Теперь, нам нужно запустить всю нашу анимацию (cloudone(), cloudtwo(), cloudthree), сразу после того, как загрузится страница. Это делается следующим образом:

$(document).ready(function() {
	setTimeout("cloudone()",10);
	setTimeout("cloudtwo()",10);
	setTimeout("cloudthree()",10);
	setTimeout("boat()",10);
});

Весь код, будет выглядеть вот так.

$(document).ready(function() {
	setTimeout("cloudone()",10);
	setTimeout("cloudtwo()",10);
	setTimeout("cloudthree()",10);
	setTimeout("boat()",10);
});
function cloudone(){
	$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
	setTimeout("cloudone()",10000);
}
function cloudtwo(){
	$("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
	setTimeout("cloudtwo()",15000);
}
function cloudthree(){
	$("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
	setTimeout("cloudthree()",20000);
}
function boat(){
	$("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
	setTimeout("boat()",20000);
}

Перевод статьи “Animated Landscape Using CSS and jQuery”, автор Vikas Ghodke

7 комментариев

  1. Уведомление: Tweets that mention Анимированный ландшафт с помощью CSS и JQuery | Очередной блог фрилансера -- Topsy.com

  6. seo-cook, ну вы не сравнивайте флеш и яваскрипт. jquery создан только чтобы анимировать какие-то детали, но никак не отрисовывать большие баннеры

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *