Создаем анимированный баннер при помощи CSS3

Главная

Статьи

Верстка сайтов

12.01.2012 00:00

Создаем анимированный баннер при помощи CSS3

Сегодня мы собираемся создать баннер используя CSS3 анимацию.

В настоящее время только Firefox и WebKit-браузеры поддерживают CSS-анимацию, но мы будем рассматривать и то, как мы можем сделать, чтобы эти баннеры также функционировали в других браузерах (которые я называю браузерами 18-го века). Однако, не следует ожидать отличной поддержки во всех браузерах (в частности, для IE 7 и ниже), когда экспериментируешь с современными CSS-технологиями.

Итак, давайте создадим анимированные баннеры!

Пожалуйста, обратите внимание: для того, чтобы сэкономить место, все префиксы браузеров были удалены. См. исходные файлы, чтобы увидеть весь CSS-код. Если вы не знакомы с CSS-анимацией, я настоятельно рекомендую в первую очередь прочитать это.

HTML-разметка

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

<div id="ad-1">

 <div id="content">

 <h2>Lost at sea?</h2>

 <h3>Relax - we've got your rudder.</h3>

 <form>

 <input type="text" id="email" value="Email address..." />

 <input type="submit" id="submit" value="Guide me" />

 </form>

 </div>

 <div id="clouds">

 <ul id="cloud-group-1">

 <li class="cloud-1"></li>

 <li class="cloud-2"></li>

 <li class="cloud-3"></li>

 </ul>

 <ul id="cloud-group-2">

 <li class="cloud-1"></li>

 <li class="cloud-2"></li>

 <li class="cloud-3"></li>

 </ul>

 </div>

 <ul id="boat">

 <li>

 <div id="question-mark"></div>

 </li>

 </ul>

 <ul id="water">

 <li id="water-back"></li>

 <li id="water-front"></li>

 </ul>

</div>

Создаем анимированный баннер при помощи CSS3

Для того чтобы понять структуру нашей разметки, давайте сосредоточимся на лодке на секунду:

<ul id="boat"> <!-- Группа элементов лодки -->

 <li> <!-- это сама лодка -->

 <div id="question-mark"></div> <!-- Знак вопроса -->

 </li>

</ul>

Теперь, посмотрим на первый баннер на демонстрационной странице. Там есть три отдельных анимации, которые происходят на корабле:

Анимация - когда лодка скользит с левой стороны. Это применяется непосредственно к неупорядоченному списку (группа элементов лодки).
Анимация - которая придает лодке эффект раскачивания, моделируя лодку плавающую по воде. Это применяется непосредственно к элементам списка (к лодке).
Анимация - которая скрывает вопросительный знак. Это применяется к div-у (question-mark).

Если вы не страдаете морской болезнью, то еще раз гляньте на демо-страницу. Вы увидите, что анимация которая применяется к элементу списка (лодке), заставляя лодку приподниматься, также влияет на DIV внутри него (со знаком вопроса). Кроме того, "slide in" анимация, которая применяется к неупорядоченному списку (группе), также влияет на элемент списка и DIV внутри него (на лодку и вопросительный знак). Это приводит нас к важным наблюдениям:

Дочерние элементы наследуют анимацию от своих родителей, в дополнение к их собственной анимации. Эти знания добавлены в наш арсенал, но число дочерних/родительских элементов при создании анимации взорвут ваш мозг (и процессор на ноутбуке вашей бабушки)!

CSS

Прежде чем мы перейдем к действительно интересному материалу и начнем создавать анимацию, мы еще должны создать стили для браузеров, которые застряли в 18 веке.

Резервные стили для старых браузеров

Мы просто создадим резервные стили как если бы CSS-анимации не существовало (мысль о том, что CSS анимация не существует заставит любого взрослого человека не только плакать, но повесить радом со мной :) ). Другими словами, если наша анимация не в состоянии проигрываться, баннер все равно должен выглядеть достойно. Таким образом, когда кто-то просматривает баннер при помощи старого браузера, они увидят нормальный, статический баннер, вместо пустого места.

Например: если кто-то использует CSS вроде этого, будут проблемы:

/* НЕПРАВИЛЬНЫЙ СПОСОБ! */

@keyframe our-fade-in-animation {

 0%   {opacity:0;}

 100% {opacity:1;}

}

div {

 opacity: 0; /* Этот блок спрятан по-умолчанию!*/

 animation: our-fade-in-animation 1s 1;

}

Если браузер пользователя не поддерживает анимацию, баннер будет оставаться невидимым для него. И тогда клиент сломает дверь в офисе продавца - с бензопилой в руках - и потребует, чтобы ему объяснили, почему они не продали его товар! И если они не в состоянии понять, что браузер может быть настолько жалким, их жизнь закончится ужасно, и последними словами их будут проклятия в адрес Internet Explorer ... :)

Но не волнуйтесь, мы предоставим расширенную поддержку браузеров:

/* ПРАВИЛЬНЫЙ СПОСОБ */

@keyframe our-fade-in-animation {

 0%   {opacity:0;}

 100% {opacity:1;}

}

div {

 opacity: 1; /* этот div будет виден по-умолчанию */

 animation: our-fade-in-animation 1s 1;

}

Как видите, DIV будет показываться даже если анимация не в состоянии проиграть. Если анимация способна играть, то DIV будет немедленно скрыт и анимации будет проиграна до конца.

Теперь, когда мы знаем, как сделать наши анимированные баннеры с поддержкой старых браузеров, давайте перейдем к основному CSS.

Есть три ключевые вещи, которые нужно иметь в виду:

Поскольку эти объявления могут быть использованы на различных веб-сайтах, мы сделаем все наши CSS-стили очень специфичными. Мы будем начинать объявление каждого селектора с id: #ad-1. Это позволит оградить наши стили баннера от вмешательства существующих стилей и элементов.
Мы будем целенаправленно игнорировать функцию задержки анимации при создании нашей анимации. Если бы мы использовали функцию задержки анимации, а также дизайн для наших элементов правильным способом (видимым по умолчанию), все это было видно на экране прежде чем анимация, наконец, начала бы играть. Именно поэтому анимация начинается немедленно, что позволяет скрывать элементы с экрана, до тех пор пока они не будут нам нужны. Мы будем моделировать задержку анимации за счет увеличения продолжительности и ручной настройки ключевых кадров. Вы увидите примеры этого, когда мы начинаем создавать анимацию.
По возможности, используйте одну анимацию для нескольких элементов. Таким образом, мы можем сэкономить много времени и сократить разрастание кода. Вы можете создать несколько различных эффектов, в одной и той же анимации, регулируя продолжительность и переходы.

Итак, мы начнем создание нашего рекламного баннера. Давайте убедимся, что он имеет относительное расположение (position: relative), чтобы внутри него элементы могли быть размещены правильно. Мы также должны убедиться, что установлено свойство overflow: hidden, чтобы скрывать всё лишнее:

#ad-1 {

 width: 720px;

 height: 300px;

 float: left;

 margin: 40px auto 0;

 background-image: url(../images/ad-1/background.png);

 background-position: center;

 background-repeat: no-repeat;

 overflow: hidden;

 position: relative;

 box-shadow: 0px 0px 6px #000;

}

Далее у нас стили для текста, полей формы и вызов соответствующей анимации. Мы также хотим убедиться, что это содержание имеет самый высокий z-index - чтобы оно не было случайно скрыто:

#ad-1 #content {

 width: 325px;

 float: right;

 margin: 40px;

 text-align: center;

 z-index: 4;

 position: relative;

 overflow: visible;

}

#ad-1 h2 {

 font-family: 'Alfa Slab One', cursive;

 color: #137dd5;

 font-size: 50px;

 line-height: 50px;

 text-shadow: 0px 0px 4px #fff;

 animation: delayed-fade-animation 7s 1 ease-in-out; /* H2 будет исчезать с симуляцией задержки анимации */

}

#ad-1 h3 {

 font-family: 'Boogaloo', cursive;

 color: #202224;

 font-size: 31px;

 line-height: 31px;

 text-shadow: 0px 0px 4px #fff;

 animation: delayed-fade-animation 10s 1 ease-in-out; /* H3 будет исчезать с симуляцией задержки анимации */

}

#ad-1 form {

 margin: 30px 0 0 6px;

 position: relative;

 animation: form-animation 12s 1 ease-in-out;  /* Этот код перемещает нашу форму с email-ом */

}

#ad-1 #email {

 width: 158px;

 height: 48px;

 float: left;

 padding: 0 20px;

 font-size: 16px;

 font-family: 'Lucida Grande', sans-serif;

 color: #fff;

 text-shadow: 1px 1px 0px #a2917d;

 border-top-left-radius: 5px;

 border-bottom-left-radius: 5px;

 border:1px solid #a2917d;

 outline: none;

 box-shadow: -1px -1px 1px #fff;

 background-color: #c7b29b;

 background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%);

}

#ad-1 #email:focus {

 background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%);

}

#ad-1 #submit {

 height: 50px;

 float: left;

 cursor: pointer;

 padding: 0 20px;

 font-size: 20px;

 font-family: 'Boogaloo', cursive;

 color: #137dd5;

 text-shadow: 1px 1px 0px #fff;

 border-top-right-radius: 5px;

 border-bottom-right-radius: 5px;

 border:1px solid #bcc0c4;

 border-left: none;

 background-color: #fff;

 background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%);

}

#ad-1 #submit:hover {

 background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%);

}

Теперь мы создадим стили для воды и вызовим соответствующую анимацию:

#ad-1 ul#water{

 /* Если бы мы хотели добавить другую анимацию для воды (перемещение по горизонтали, например), мы могли бы сделать это здесь */

}

#ad-1 li#water-back {

 width: 1200px;

 height: 84px;

 background-image: url(../images/ad-1/water-back.png);

 background-repeat: repeat-x;

 z-index: 1;

 position: absolute;

 bottom: 10px;

 left: -20px;

 animation: water-back-animation 3s infinite ease-in-out; /* Эффект подпрыгивания воды */

}

#ad-1 li#water-front {

 width: 1200px;

 height: 158px;

 background-image: url(../images/ad-1/water-front.png);

 background-repeat: repeat-x;

 z-index: 3;

 position: absolute;

 bottom: -70px;

 left:-30px;

 animation: water-front-animation 2s infinite ease-in-out; /* Другой эффект подпрыгивания воды - он немного отличается. Мы сделаем эту анимацию немного быстрее, чтобы создать какую-то перспективу. */

}

Теперь создадим стили для лодки и всех ее элементов. Опять же, мы будем вызывать соответствующую анимацию:

#ad-1 ul#boat {

 width: 249px;

 height: 215px;

 z-index: 2;

 position: absolute;

 bottom: 25px;

 left: 20px;

 overflow: visible;

 animation: boat-in-animation 3s 1 ease-out; /* Перемещение группы вначале */

}

#ad-1 ul#boat li {

 width: 249px;

 height: 215px;

 background-image: url(../images/ad-1/boat.png);

 position: absolute;

 bottom: 0px;

 left: 0px;

 overflow: visible;

 animation: boat-animation 2s infinite ease-in-out; /* Имитация лодки покачивающейся на воде - похожая анимации уже используется для самой воды. */

}

#ad-1 #question-mark {

 width: 24px;

 height: 50px;

 background-image: url(../images/ad-1/question-mark.png);

 position: absolute;

 right: 34px;

 top: -30px;

 animation: delayed-fade-animation 4s 1 ease-in-out; /* Прячем вопросительный знак */

}

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

Создаем анимированный баннер при помощи CSS3

Вот эти стили:

#ad-1 #clouds {

 position: absolute;

 top: 0px;

 z-index: 0;

 animation: cloud-animation 30s infinite linear; /* Перемещение облаков влево, бесконечное количество раз */

}

#ad-1 #cloud-group-1 {

 width:720px;

 position: absolute;

 left:0px;

}

#ad-1 #cloud-group-2 {

 width: 720px;

 position: absolute;

 left: 720px;

}

#ad-1 .cloud-1 {

 width: 172px;

 height: 121px;

 background-image: url(../images/ad-1/cloud-1.png);

 position: absolute;

 top: 10px;

 left: 40px;

}

#ad-1 .cloud-2 {

 width: 121px;

 height: 75px;

 background-image: url(../images/ad-1/cloud-2.png);

 position: absolute;

 top: -25px;

 left: 300px;

}

#ad-1 .cloud-3 {

 width: 132px;

 height: 105px;

 background-image: url(../images/ad-1/cloud-3.png);

 position: absolute;

 top: -5px;

 left: 530px;

}

Уффф! Тут было много CSS-кода. Но самое интересное дальше!

Анимация

Помните: До этого момента, никакой, собственно, анимации не было. Если бы вы просмотрели баннер сейчас, вы бы увидели то, что будет показывать даже старый браузер - статическое объявление. Сейчас мы фактически создадим анимацию, которую мы уже вызвали в нашем CSS-коде.

Теперь, когда наш баннер отображается хорошо, давайте оживим это статическое объявление! Перейдем прямо к коду - я расскажу вам в комментариях, что будет происходить:

/* Анимации с моделируемой задержкой используется для исчезновения нескольких элементов. Мы моделируем задержку, начиная исчезновение элемента после прохождения 80% времени анимации (вместо того чтобы начать процесс немедленно). Мы можем использовать эту технику и увеличить продолжительность анимации на любом элементе для достижения желаемой продолжительности задержки: */

@keyframes delayed-fade-animation {

 0%   {opacity: 0;}

 80%  {opacity: 0;}

 100% {opacity: 1;}

}

/* Анимация, которая будет перемещать нашу форму с адресом. Как вы можете видеть, эта анимация также использует моделирование задержки: */

@keyframes form-animation {

 0%   {opacity: 0; right: -400px;}

 90%  {opacity: 0; right: -400px;}

 95%  {opacity: 0.5; right: 20px;}

 100% {opacity: 1; right: 0px;}

}

/* Эта анимация перемещает лодку с левой стороны, когда реклама начинается: */

@keyframes boat-in-animation {

 0%   {left: -200px;}

 100% {left: 20px;}

}

/* Вот наша действительно классная анимация облака. Первая группа облаков начнет двигаться к центру, вторая группа - к правой части экрана. Как только группа облаков уйдет полностью за пределы экрана, облака будут сброшены (очень быстро) в исходное положение и анимация повториться: */

@keyframes cloud-animation {

 0%       {left: 0px;}

 99.9999%   {left: -720px;}

 100%     {left: 0px;}

}

/* Последние 3 анимации похожие, с небольшой разницей в положении каждого элемента. Они будут имитировать волнение океана: */

@keyframes boat-animation {

 0%   {bottom: 0px; left: 0px;}

 25%  {bottom: -2px; left: -2px;}

 70%  {bottom: 2px; left: -4px;}

 100% {bottom: -1px; left: 0px;}

}

@keyframes water-back-animation {

 0%   {bottom: 10px; left: -20px;}

 25%  {bottom: 8px; left: -22px;}

 70%  {bottom: 12px; left: -24px;}

 100% {bottom: 9px; left: -20px;}

}

@keyframes water-front-animation {

 0%   {bottom: -70px; left: -30px;}

 25%  {bottom: -68px; left: -32px;}

 70%  {bottom: -72px; left: -34px;}

 100% {bottom: -69px; left: -30px;}

}

Заключение

В ходе этого урока, мы узнали ключевые моменты создания анимации, с поддержкой старых браузеров:

Дочерние элементы наследуют анимацию своих родителей в дополнение к их собственной анимации. Мы можем использовать это для создания более сложной анимации.
Для стилей нашей рекламы мы должны использовать очень специфичные селекторы, чтобы наши объявления не были переопределены другими стилями сайта.
Необходимо задавать такие стили для элементов, что если наша анимация не в состоянии проигрываться, то объявление все равно должно прилично выглядеть.
Когда это возможно, использовать одну анимацию для нескольких элементов - экономим время и препятствуем разрастанию кода.
Часто ссылаемся на Internet Explorer, как на "браузер 18-го века" и при этом с отвращением и гневом трясем кулаком. :)

Удачи в ваших экспериментах с CSS.