Сегодня мы будем создавать рекламный щит, используя исключительно CSS. Обратите внимание, этот пример тестировался только в браузере Safari на компьютере Mac и в браузере Safari для системы IOS на iPhone. Ниже вы увидите демонстративное видео, на случай, если у вас нет этих браузеров.

Демонстрация работы – Скачать исходный код

Анимация не полностью идеальна, но мы не уверены, причина в нашем коде, или движок Webkit анимирует не так, как мы ожидали. В любом случае, давайте рассмотрим все детально, чтобы разобраться, как оно работает.

Видео

Вот демонстрационное видео, показывающее, как работает наш пример в браузере Safari.

Выглядит здорово! Теперь давайте рассмотрим, как вы сможете создать что-то подобное сами.

HTML 

Как всегда, в коде HTML нетрудно разобраться. Вот то. к чему мы пришли.

<ol id="billboard">
<li><div></div><div></div><div></div></li>
<li><div></div><div></div><div></div></li>
<!-- Повторить для каждого столбца -->
</ol>

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

CSS

Давайте начнем писать код CSS с основных и общих свойств перед тем, как перейти к анимации. Как обычно, мы добавили комментарии, чтобы прояснить некоторые моменты.

/* Рекламный щит */
#billboard { list-style:none; }
#billboard li { display:inline; float:left; }
#billboard li div { position:absolute;
   -webkit-backface-visibility: hidden; /* Hide when facing back */
   -webkit-transition-property: -webkit-transform; /* Only animate the transform property */
}
/* Положение фона */
#billboard li:nth-child(1) div { background-position: -0px 0; margin-left:0px }
#billboard li:nth-child(2) div { background-position: -36px 0; margin-left:36px }
#billboard li:nth-child(3) div { background-position: -72px 0; margin-left:72px }
/* Continue for all background positions */

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

Теперь перейдем к более интересной части: анимации. Это не так уж и сложно, но Вам нужно понять, что происходит. Вот то, к чему мы пришли.

/* Анимация */
#billboard li div:nth-child(1) {
   background-image:url("../images/cocktail.png");
   -webkit-animation:rotate 25s linear;
   -webkit-animation-iteration-count: infinite; /* Keep on looping */
}
@-webkit-keyframes rotate {
   0% { -webkit-transform:rotateY(0deg) }
   16.5% { -webkit-transform:rotateY(120deg) }
   33% { -webkit-transform:rotateY(120deg) }
   49.5% { -webkit-transform:rotateY(240deg) }
   66% { -webkit-transform:rotateY(240deg) }
   82.5% { -webkit-transform:rotateY(360deg) }
   100% { -webkit-transform:rotateY(360deg) }
}

Вот то, что делает этот фрагмент кода CSS:

• Устанавливает правильное фоновое изображение
• Применяет линейную анимацию поворота на 25 секунд
• Начинает вращать изображение с определенной задержкой, чтобы повернуть ключевые кадры
• С 0 до 16,5% поворачивает, с 16,5% до 33 останавливается и так далее
• Не забывайте, что благодаря свойству backface-visibility , изображение невидимо, когда повернуто обратной стороной

Эти свойства будет применяться также ко второму и третьему изображениям, но у всех изображений будут разные начальные положения. И это все, что Вам нужно, чтобы добиться этого эффекта!

Заключение

Надеемся, Вам было понятно, и Вы узнали что-то новое о CSS анимации. Не стесняйтесь покопаться в исходном коде и попробовать повторить этот эффект самостоятельно. Если Вы интересуетесь решением с применением jQuery, посмотрите эту статью.

Демонстрация работы – Скачать исходный код

Автор урока Marco Kuiper

Смотрите также:

• Создание рекламного щита с использованием jQuery и CSS
• Складывающиеся информационные блоки при помощи jQuery и CSS3
• Создание плиточной анимации при помощи CSS и jQuery