Давно хотел написать о создании баннера для сайта непосредственно средствами css, не применяя при этом технологий flash. Совсем недавно наткнулся на интересную зарубежною статью о том, как создать красивый анимированный баннер.  Выглядит достаточно красиво и весьма привлекает взгляд пользователей, но следует обратить взор на одно маленько но, что правильное отображение будет только в браузерах которые полностью поддерживают анимации CSS3, а это браузеры Firefox и WebKit.

 

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

Следует остановить свое внимание на таком элементе как лодка более детально, в коде приведено описание:

С лодкой происходят три анимации:

  1. Выскальзывание лодки слева. Применяется для неупорядоченного списка (группа).
  2. Имитация раскачивания лодки на воде. Применяется к элементу списка (лодка).
  3. Появление знака вопроса. Применяется к элементу div (знак вопроса).

Если посмотреть на демонстрационную страницу, то модно увидеть, что анимация для пункта списка (лодки) также действует на элемент div внутри него (Знак вопроса). Также анимация «выскальзывания» для неупорядоченного списка действует на пункт списка (лодку и знак вопроса).

Обратная совместимость:

Мы обеспечим обратную совместимость просто задав стили разметки так, как будто анимаций CSS не существует совсем. Если кто-то будет смотреть страницу в старом браузере, то увидит обычную статичную картинку, а не пустое белое место.

Если браузер не поддерживает анимации, то элемент div останется невидимым для пользователя. А вот так мы обеспечим обратную совместимость со старыми браузерами:

Теперь элемент div  будет выводиться даже если анимация не может запуститься. А в современных браузерах div будет сначала скрыт в ходе анимации.

Основа:

Теперь мы знаем как обеспечить обратную совместимость (что поможет избежать проблем при работе с реальными проектами). Пришла пора создать основу нашего кода CSS.

Нужно помнить о 3 моментах:

  1. Так как баннер будет использоваться на разных сайтах, мы сделаем все наши селекторы CSS особенными. Все они будут начинаться с идентификатора #ad-1. Таким образом мы постараемся избежать перекрытия нашего кода и кода сайта.
  2. Мы намерено игнорируем задержку анимации в установках. Если использовать задержку анимации при задании стилей с видимостью элементов по умолчанию, то структура баннера будет нарушаться внезапным исчезновением или появлением частей картинки после завершения анимации. Задержка анимации имитируется длительностью и настройкой кадров.
  3. Когда возможно используем одну анимацию для нескольких элементов. Таким образом мы экономим время и сокращаем размер кода.

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

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

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

Зададим стили для лодки и её элементов. Также вызываем соответствующие анимации:

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

Вот так выглядит код CSS:

Начиная с данной точки ничего в действительности на анимируется. Если посмотреть наш баннер сейчас, то  вы увидите статичную картинку. Здесь создаются анимации, которые вызываются в выше приведенном коде. Теперь в вдохнем жизнь в нашу прекрасную статичную картинку:

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