Рекламный щит на CSS3

Эмуляция анимации рекламного щита на CSS3 является достаточно забавной штукой, особенно, учитывая, что для этого не нужны принтеры-плоттеры, так как, все сделано на CSS. Не все так гладко с анимацией, как хотелось — нет поддержки для всех современных браузеров. Но сам факт того, что такой эффект выполним на CSS3 уже воодушевляет. Смотрите...

ПримерСкачать

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

Видео

В представленном видео показана страница с примером на последней версии браузера Safari.

Превосходно! Правда? Теперь давайте посмотрим, как сделать рекламный щит самим.

HTML

Как всегда, HTML прост.

Мы собираемся использовать неупорядоченный список с несколькими элементами — по одному для каждого столбца. Каждая колонка будет иметь три «стороны»: изображение контейнеров. Хотя это и не самая трудная часть, это нужно понять, прежде чем мы добавим CSS.

CSS

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

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

А сейчас интересный момент: анимация. Код не сложный, главное понять, как все работает. Поехали...

Что делает CSS:

  1. Устанавливает корректное свойство background-image
  2. Применяет linear анимацию на 25 секунд с помощью вызова rotate
  3. rotate запускает вращение ключевых кадров в определенный промежуток времени
  4. От 0 до 16.5% происходит вращение, от 16.5 до 33% — пауза и т.д.
  5. Запомните: Из-за backface-visibility, изображение не показывается, когда повернуто в другую сторону

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

Заключение

Как уже раньше отмечалось, CSS анимация не совершена и поддержка браузеров слабая. Чтобы получить такой эффект на jQuery, посмотрите статью на сайте Codrops.


2 комментарий на “Рекламный щит на CSS3

    • В статье не обсуждается, нужна эта технология или нет.

      Но рассматривается вариант использования webkit, что кстати полезно знать, если вы хоть как-то связаны с разработкой веб-сайтов.

      Thumb up 0 Thumb down 0

Оставить комментарий