С появлением JQuery, многие разработчики, не слишком хорошо знакомые с javascript, начали использовать jQuery, благодаря большому количеству различных эффектов, поддерживаемых этим фреймворком. На сегодняшний день, JQuery является одним из самых популярных ява-скрипт-фреймворков. Такая его популярность объясняется простотой использования и наличием множества замечательных эффектов, для применения которых, не требуется углубленных знаний ява-скрипт. В сегодняшней статье, мы создадим анимированную картинку, с помощью CSS и JQuery.
Шаг 1. Подготовка файлов
Для начала, нам необходимо подготовить все файлы, необходимые для этого примера, затем создать один HTML-файл, один CSS-файл и папку, которая будет содержать все наши картинки.
Прежде, чем мы начнем, посмотрите демо.
Шаг 2. HTML-страница
Теперь, создадим 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>
[/html]
Полная версия:
[html]
<!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>
[/html]
Шаг 2. CSS-стили
Далее добавим немного CSS-стилей, без которых просто нельзя обойтись. Здесь следует обратить внимание на два момента – это свойство overflow: hidden, которое обязательно должно быть установлено для блока #inner, и абсолютное позиционирование, для всех, двигающихся картинок. На данном этапе, мы вынесем наши движущиеся изображения (облака и лодку) за пределы контейнера, путем установки отрицательных полей, с тем чтобы в дальнейшем, с помощью JQuery, получить красивый эффект. Далее CSS-код, необходимый для нашего примера:
[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;
}
[/css]
Шаг 4. jQuery
Прежде всего, нам необходимо подключить jQuery, к нашей странице:
[html]
<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>
[/html]
Здесь, мы дважды будем использовать функцию .animate, для анимирования облаков и лодки. Кроме того, мы создадим специальную функцию для того, чтобы облака и лодка двигались по кругу. Смотрите пример ниже.
[javascript]
function cloudone(){
$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
setTimeout("cloudone()",10000);
}
[/javascript]
В приведенном коде происходит следующее: с помощью первой функции .animate, мы двигаем объект #cloudone вправо, на 1200 пикселей, причем объект будет двигаться со скользящим эффектом, в течении 10 секунд. Далее, вторая функция .animate возвращает объект на исходную позицию, с интервалом 0 секунд. Для того, чтобы снова запустить анимацию, нам необходимо суммировать временные интервалы обоих функций .animate, и с помощью функции setTimeout, мы сможем снова запустить цикл вращения картинки. Таким образом, можно анимировать все картинки. Далее приведен код, для анимации остальных изображений:
[javascript]
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);
}
[/javascript]
Теперь, нам нужно запустить всю нашу анимацию (cloudone(), cloudtwo(), cloudthree), сразу после того, как загрузится страница. Это делается следующим образом:
[javascript]
$(document).ready(function() {
setTimeout("cloudone()",10);
setTimeout("cloudtwo()",10);
setTimeout("cloudthree()",10);
setTimeout("boat()",10);
});
[/javascript]
Весь код, будет выглядеть вот так.
[javascript]
$(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);
}
[/javascript]
Перевод статьи “Animated Landscape Using CSS and jQuery”, автор Vikas Ghodke
Leave a Reply to seo-cook Cancel reply