Анимация с помощью jQuery / Javascript
(Перевод Виктории Шидловской Building an Animated Cartoon Robot with jQuery)
Смотреть ДЕМО анимации на http://robot.anthonycalzadilla.com
Зачем это надо?
Кроме решения забавной задачи, какие цели мы преследуем? Ответ не так очевиден, как кажется. Толку эт этой анимации столько же, сколько от корабля в бутылке. Тем не менее, существует более важная цель. Упражнение поможет веб-дизайнерам и разработчикам расширить границы своего представления о jQuery, CSS и макетировании веб-сайтов.
Описание
Проект был построен с помощью расположения пустых div-ов как слоев – один над другим, и в качестве их background-картинок использованы прозрачные файлы PNG.
PNG-картинки были анимированы, они движутся с разной скоростью. Это стало возможно благодаря плагину jQuery от Alexander Farkas. Плагин симулирует «эффект параллакса» — различное смещение предметов относительно глаза наблюдателя в зависимости от степени их удаленности. Подобный прием использовался в старых видео-играх, типа «Марио».
Робот собран из отдельных частей, то есть, отдельных div-ов. В конце урока мы анимируем робота с помощью jQuery.
Разметка html
<div id="wrapper">
<div id="cloud-01">
<div id="cloud-02">
<div id="mountains-03">
<div id="ground">
<div id="full-robot">
<div id="branding"><h1>Robot Head.</h1></div>
<div id="content"><p> Robot Chest.</p></div>
<div id="sec-content"><p> Robot Pelvis.</p></div>
<div id="footer"><p> Robot Legs.</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
Ни один из div-ов не имеет определенной ширины, поэтому они будут растягиваться на всю ширину окна в любом браузере. ВНИМАНИЕ: Все картинки, которые будут создавать эффект параллакса, имеют ширину 9999px, больше, чем ширина обычного монитора компьютера или телевизора. Мы используем CSS, чтобы расположить картинки именно там, где мы хотим.
Стили CSS
CSS так же прост, как и основная разметка:
h1, p { position: absolute; left: -9999px; }
div {position: relative;}
#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px;
border: 5px solid #402309;}
#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }
#cloud-02 { background: url(../images/clouds-02.png) no-repeat left top; }
#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }
#ground { background: url(../images/ground-05.png) no-repeat left bottom; }
#full-robot { width: 271px; }
#branding {
background: url(../images/robot-head.png) no-repeat center top;
width: 271px;
height: 253px;
z-index: 4;
}
#content {
background: url(../images/robot-torso.png) no-repeat center top;
width: 271px;
height: 164px;
z-index: 3;
margin-top: -65px;
}
#sec-content {
background: url(../images/robot-hips.png) no-repeat center top;
width: 271px;
height: 124px;
z-index: 2;
margin-top: -90px;
}
#footer {
background: url('../images/robot-legs.png') no-repeat center top;
width: 271px;
height: 244px;
z-index: 1;
margin-top: -90px;
}
Абсолютное позиционирование (Absolute positioning) для h1 и p используется для того, чтобы подвинуть любой заголовок или текст на 9999px влево (как вы помните, ширина картинок 9999px). Затем мы выставляем для всех div-ов относительное позиционирование (position: relative). Благодаря этому мы можем использовать z-index, чтобы нарушить обычный порядок расположения картинок «одна за другой» на «одна над другой».
jQuery Javascript
На заметку: оригинальный код анимирования робота был ужасен. Ребята из coding cyborg помогли нам и почистили скрипт:
$(document).ready(function(){
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});
$('#klicker').click(function(){
$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);
startHim();
$("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
setTimeout("leaveScreen()",15000);
});
});
var num = 1;
function startHim(){
num++;
$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
$("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
if(num<4){
setTimeout("startHim()",300);
} else {
setTimeout("bounceHim()",300);
}
}
function bounceHim(){
$("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
setTimeout("bounceHim()",300);
}
function leaveScreen(){
$("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}
Начинаем с того, что устанавливаем позиции всех изображений.
После нажатия на ‘#klicker’ div, функция сообщает jQuery анимировать background-ы и начать их движение с текущей позиции к установленным координатам. Благодаря тому, что мы раскидали все изображения по разным div-ам, они могут перемещаться с разной скоростью. Премещение элементов на разной скорости создает 3D-эффект. Элементы на заднем плане должны двигаться гораздо медленнее тех, что на переднем. Заметьте, что скорость облаков гораздо ниже скорости гор. И быстрее всего движется земля. И в конце концов, после запуска всех фоновых изображений, функция ‘#klicker’ вызывает функцию ‘startHim()’.
Функция ‘startHim()’, как вы уже догадались, запускает робота. Он начинает подскакивать и выезжает на середину div-а #wrapper. Функция ‘startHim()’ вызывает функцию ‘bounceHim()’. А та, в свою очередь, закольцовывается и работает постоянно.
Нам необходимо достичь эффекта, буд-то робот подпрыгивает на кочках. Для получения нерегулярного подпрыгивания мы используем функцию ‘bounceHim()’. Она выделяет отдельные div-ы и заставляет их перемещаться на 5px вверх и вниз. Но одинакового движения всех частей робота недостаточно, это слишком грубо. Нам нужно, чтобы движение было более интересным и беспорядочным. Так что заставим div с телом робота двигаться в другом ритме, чем все остальное. Тело будет двигаться на 8px вверх и 8px вниз.
Последняя функция, котрую мы вызываем – это ‘leaveScreen()’. Через 15 секунд (15000) робот отъезжает вправо за пределы экрана.
Я думаю, это очень крутой эксперимент. Дело даже не в анимации, а в том, как еще можно применять использованные в примере функции для создания эффектов меню, div-ов с текстом и т.п.
leave a comment