Простое создание баннеров на CSS3

В данной статье хочу поделиться своим опытом в создании баннеров с помощью CSS3 свойств, которые получили поддержку почти во всех современных браузерах. Так необходимые для создания баннеров CSS3-свойства поддерживаются следующими версиями браузеров: Chrome 12, FF 10, IE 10, iOS 3.2, Android 3.2, Opera 12. Особую трудность здесь представляет еще слабая распространенность последней 10-й версии IE и лишь частичная поддержка анимационных возможностей в Опере (пока не поддерживаются 3D трансформации).

И так приступим к небольшой демонстрации простого создания баннера, состоящего из двух анимированных строк текста. Реализацию данного баннера можно посмотреть на сайте http://da4niku.ru.

Верста баннера имеет следующий вид:

<div id="banner_points">
    <div id="banner_points_1">За каждый ежедневный визит на сайт</div>
    <div id="banner_points_2">Вы получаете 1 очко голосования!</div>
    <div id="banner_points_no">За ежедневный визит на сайт вы получаете 1 очко голосования!</div>
</div>

В общем контейнере banner_points находятся блоки строк banner_points_1 и banner_points_2, а banner_points_no показывается при отсутствии поддержки анимации со стороны браузера пользователя.

Далее рассмотрим необходимые стили по частям:

#banner_points
{
  overflow: hidden;
  position: relative;
  height: 60px;
  background-color: #f8f7b9;
  border: 1px solid #a93903;
  border-radius: 10px;
}
#banner_points_1, #banner_points_2, #banner_points_no
{
  width: 200px;
  height: 60px;
  position: absolute;
  border-radius: 10px;
}
#banner_points_1, #banner_points_2
{
  font-family: Arial;
  font-size: 16px;
  color: #000000;
  text-align: center;
}

Здесь мы прописываем основные стили внешнего вида баннера (еще без анимации). overflow: hidden позволяет скрывать строки за пределами контейнера, а position: relative у контейнера и position: absolute у строк позволяет свободно перемещать строки относительно контейнера.

Далее описываем начальные позиции и установки анимации для строк:

#banner_points_1
{
  top: 60px;
  padding-top: 1px;
  z-index: 1;
  -moz-animation: banner_points_1 7s linear infinite;
  -webkit-animation: banner_points_1 7s linear infinite;
  -o-animation: banner_points_1 7s linear infinite;
  -ms-animation: banner_points_1 7s linear infinite;
  animation: banner_points_1 7s linear infinite;
}
#banner_points_2
{
  top: -60px;
  padding-top: 10px;
  z-index: 2;
  -moz-animation: banner_points_2 7s linear infinite;
  -webkit-animation: banner_points_2 7s linear infinite;
  -o-animation: banner_points_2 7s linear infinite;
  -ms-animation: banner_points_2 7s linear infinite;
  animation: banner_points_2 7s linear infinite;
}

Здесь мы убираем строки за границы экрана и устанавливаем бесконечную анимацию в 7 секунд по линейному закону для каждой строки. banner_points_1 и banner_points_2 – имена анимации, которую мы детально распишем далее. Так же необходимо продублировать настройки анимации с префиксами для каждого браузера.

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

#banner_points_no
{
  font-family: Arial;
  font-size: 12px;
  color: #b10c0d;
  text-align: center;
  padding-top: 7px;
  -moz-animation: banner_points_no 1ms forwards;
  -webkit-animation: banner_points_no 1ms forwards;
  -o-animation: banner_points_no 1ms forwards;
  -ms-animation: banner_points_no 1ms forwards;
  animation: banner_points_no 1ms forwards;
}
@keyframes banner_points_no
{
  0% {top: 0px;}
  100% {top: 60px;}
}

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

Затем опишем анимацию наших главных строк:

@keyframes banner_points_1
{
  0%
  {
    top: 0px;
    transform: rotateY(90deg);
    opacity: 1;
  }
  16.7%, 50%
  {
    top: 0px;
    transform: rotateY(0deg);
    opacity: 1;
  }
  66.7%, 100%
  {
    top: 0px;
    transform: rotateY(0deg);
    opacity: 0;
  }
}
@keyframes banner_points_2
{
  0%, 50%
  {
    top: -60px;
    transform: rotateX(0deg);
  }
  66.7%, 90%
  {
    top: 0px;
    transform: rotateX(0deg);
  }
  100%
  {
    top: 0px;
    transform: rotateX(90deg);
  }
}

Первая строка сначала поворачивается вдоль оси Y, а затем плавно затухает. Вторая строка сначала ждет завершения анимации первой строки, затем выезжает сверху контейнера и далее поворачивается вдоль оси X. Так же необходимо описать все @keyframes с префиксами для всех браузеров. Хочу отметить, что после свойства с префиксом должно следовать свойство без префикса. Например, для FF код анимации будет таким:

@-moz-keyframes banner_points_1
{
  0%
  {
    top: 0px;
    -moz-transform: rotateY(90deg);
    transform: rotateY(90deg);
    opacity: 1;
  }
  16.7%, 50%
  {
    top: 0px;
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 1;
  }
  66.7%, 100%
  {
    top: 0px;
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    opacity: 0;
  }
}
@-moz-keyframes banner_points_2
{
  0%, 50%
  {
    top: -60px;
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  66.7%, 90%
  {
    top: 0px;
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  100%
  {
    top: 0px;
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
  }
}

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

Еще хотелось бы отметить тот факт, что данный вид баннеров очень сложно, а может и невозможно (хотя невозможного ничего нет) скрыть браузерными плагинами, т.к. они являются частью верстки сайта (т.е. понять, что данный DIV является баннером, определить будет сложно).

Автор: archerl