388 Эмуляция анимации рекламного щита на CSS3 является достаточно забавной штукой, особенно, учитывая, что для этого не нужны принтеры-плоттеры, так как, все сделано на CSS. Не все так гладко с анимацией, как хотелось — нет поддержки для всех современных браузеров. Но сам факт того, что такой эффект выполним на CSS3 уже воодушевляет. Смотрите...
Помните, что пример будет работать только в браузерах с поддержкой webkit. Если у вас нет анимации, посмотрите видео, как это выглядит.
Видео
В представленном видео показана страница с примером на последней версии браузера Safari.
Превосходно! Правда? Теперь давайте посмотрим, как сделать рекламный щит самим.
HTML
Как всегда, HTML прост.
|
1 2 3 4 |
<ol id="billboard"> <li><div></div><div></div><div></div></li> <li><div></div><div></div><div></div></li> </ol> |
Мы собираемся использовать неупорядоченный список с несколькими элементами — по одному для каждого столбца. Каждая колонка будет иметь три «стороны»: изображение контейнеров. Хотя это и не самая трудная часть, это нужно понять, прежде чем мы добавим CSS.
CSS
Давайте начнем с базовых вещей в CSS, прежде, чем мы перейдем к анимации.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* BILLBOARD */ #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 */ } /* BACKGROUND POSITION */ #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 свойства для анимации. Также сдвигаем позицию бэкграунда и margin-left для каждого столбца, чтобы полностью показать изображение.
А сейчас интересный момент: анимация. Код не сложный, главное понять, как все работает. Поехали...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* ANIMATION */ #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:
- Устанавливает корректное свойство
background-image - Применяет
linearанимацию на 25 секунд с помощью вызоваrotate rotateзапускает вращение ключевых кадров в определенный промежуток времени- От 0 до 16.5% происходит вращение, от 16.5 до 33% — пауза и т.д.
- Запомните: Из-за
backface-visibility, изображение не показывается, когда повернуто в другую сторону
Все это работает для второго и третьего изображения, с той лишь разницей, что для них идет свой тайминг вращений и пауз. Вот и все, что нужно для этого эффекта!
Заключение
Как уже раньше отмечалось, CSS анимация не совершена и поддержка браузеров слабая. Чтобы получить такой эффект на jQuery, посмотрите статью .
Да нахрен не кому не нужна технологий, которая работает только в webkit
В статье не обсуждается, нужна эта технология или нет.
Но рассматривается вариант использования webkit, что кстати полезно знать, если вы хоть как-то связаны с разработкой веб-сайтов.