ВходПример создания динамического баннера на html. Адаптивный рекламный баннер при помощи HTML5 и CSS3
Генератор составления кода для баннера. Составление кода банера онлайн процедура простая и незатейливая. А зачем вообще нужен банер на сайт?
На сайт баннер мы добавляем для того, чтобы рекламировать товар, услуги, продвижения бренда, показать свой товар.
На сайт баннер мы добавляем для того, чтобы рекламировать товар, услуги, продвижения бренда и так далее.
Располагая код баннера на сайте, мы хотим что то выделить, тем самым привлечь внимание.
Как можно использовать баннеры практически?
Возможностей использования баннерной рекламы может быть сколько угодно. Давайте возьмем реальный пример из жизни. Например, Вы зарегистрировались в партнерской программе. В рамках этой программы, Вы получаете партнерские ссылки, с помощью которых можно продвигать товар.
Как правило, вместе с продвижением товара, для того, чтобы Ваши доходы были выше, Вы получаете реферальную ссылку для привлечения других партнеров.
В качестве материалов в партнерской программе, Вам могут предоставить готовые баннеры. Таким образом, размещая код баннеров в сети, например на своем сайте, Вы рекламируете товар и набираете собственных партнеров.
Online сервис получения кода баннера
С помощью этого генератора вы сможете создать и получить готовый HTML код вашей кнопки или баннера. Если вы не можете самостоятельно написать код то заполнив форму вы в один клик получите готовый HTML, который можно вставить на страницы сайта |
Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких «мудреных » мы и поведаем, как сделать баннер.
Что такое баннеры
Под баннером в интернете подразумевается прямоугольное рекламное изображение со статическим или динамическим (анимированным ) содержимым. Баннер может включать в себя как текст, так и графический рисунок. Баннер, как правило, снабжен ссылкой, активирующейся после щелчка по нему кнопкой мыши.
Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны
» с тематикой ресурса:
Хорошо бы узнать, как можно сделать баннер для сайта. Но для начала нужно разобраться с существующими типами баннеров. Различают следующие их типы:
- Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате JPEG или PNG . Характеризуются малым весом, не влияющим на скорость загрузки страницы.
- Анимированные баннеры – анимация создана с помощью GIF . Состоит из нескольких картинок, сменяющих друг друга с заданной частотой. Вес баннера зависит от количества используемых в нем изображений.
- Flash – в таком баннере анимация сделана на основе Flash . Она может реагировать на действия пользователя.
Интерактивное содержимое может быть представлено в форме игры или анкеты с добавлением звука. Рисунки для анимации создаются с помощью векторной графики.
Существует много различных размеров баннеров для сайта. Но самыми популярными из них являются:
- 88 на 31 пиксель;
- 120 на 60 пикселей;
- 120 на 90 пикселей;
- 120 на 240 пикселей;
- 125 на 125 пикселей;
- 120 на 600 пикселей;
- 160 на 600 пикселей;
- 180 на 150 пикселей;
- 234 на 60 пикселей;
- 240 на 400 пикселей;
- 250 на 250 пикселей;
- 300 на 600 пикселей;
- 300 на 250 пикселей;
- 336 на 280 пикселей;
- 150 на 150 пикселей;
- 468 на 60 пикселей;
- 728 на 90 пикселей.
Признаки эффективного рекламного баннера
Эффективность рекламного баннера, размещенного на сайте, зависит не только от популярности площадки. В большей мере его эффективность зависит от уровня выполнения самой рекламы. Качественный баннер должен отвечать нескольким основным критериям:
- Привлекать внимание пользователя – но это не значит, что баннер должен быть чересчур ярким и мигающим. Такая реклама вызовет у посетителя раздражение, а не внимание. Содержимое баннера должно ненавязчиво «намекнуть» пользователю о своем присутствии. Поэтому при подборе изображения и текста для него всегда должен учитываться психологический фактор;
- Вызвать интерес – баннеры для сайта должны вызывать у пользователя интерес к объекту рекламы. Товар или услуга должны быть поданы не только со вкусом, но и оригинально. Приветствуется использование легкого остроумия и юмора:
- Побуждение к переходу по ссылке баннера – достигается за счет эффекта некоторой таинственности и недосказанности,
вложенного в содержимое баннера. - Побуждение к заказу услуги или покупке – прежде всего, зависит от содержимого баннерной рекламы. Оно должно показывать самые лучшие стороны объекта рекламы или ту выгоду, которую может получить пользователь от его приобретения.
- Если баннер предназначен для повышения узнаваемости бренда и увеличения его имиджа, то рекламное содержимое должно навеивать потребителю чувство доверия. Но не вызывать при этом негативных ассоциаций.
Закономерности, которые стоит учитывать перед тем, как размещать баннер на сайте:
- Чем больше баннер, тем выше вероятность перехода по нему пользователя. Самым эффективным размером считается 240 на 400 пикселей;
- Наибольшим эффектом обладает баннерная реклама, размещенная сверху (в шапке ). Также она может быть размещена сбоку или внизу страницы, но эффективность здесь несколько ниже;
- Анимированные баннеры способны быстрее привлечь внимание пользователя – интуитивно глаз человека реагирует на движение.
Создание и размещение рекламного баннера
Перед тем, как вставить баннер на сайт, нужно определиться с местом его размещения. При этом нужно учитывать размеры баннера и имеющиеся свободные места на страницах. Определившись с местом расположения рекламного блока, можно вставлять код баннера в html страницы.
Код большинства баннеров соответствует шаблону:
- a href=»/ссылка на сайт рекламодателя» – адрес ресурса, на который приведет пользователя щелчок по баннеру;
- title=»заголовок» – текст, отображающийся в сплывающей подсказке при наведении на область баннера;
- target=»_blank» – задает правила отображения сайта рекламодателя после перехода по ссылке баннера («_blank»- откроется в новом окне);
- rel=»nofollow» – запрещает поисковикам обработку этой ссылки;
- img src=»https://www.сайт/wp-content/uploads/путь к изображению» – задает путь к изображению, отображаемому в баннере;
- alt=»альтернативный текст» – текст, который будет отображен в баннере, если его рисунок не загружен.
Но не обязательно разрабатывать баннер самостоятельно. Для этого можно воспользоваться специальными онлайн-генераторами. Чтобы сгенерировать код баннера на таком сервисе, нужно заполнить несколько полей и нажать на кнопку:
Или можно заказать создание баннера в профессиональной студии. Тогда это обойдется дороже… Вот примерные расценки:
- Разработка обычного GIF баннера – от 25$;
- Создание баннера на основе Flash – 70-150$;
- Ресайз – примерно 50% от первоначальной его цены.
Но если немного помудрить, то можно сотворить простенький баннер самостоятельно. Вот какое чудо получается после десяти минут манипуляций с кодом html и изображением в Coreldraw :
Код баннера:
Если еще немного помудрить с кодом и добавить пару обработчиков событий, то получиться баннер с меняющейся картинкой. Изображение в баннере меняется во время наведения на него курсора.
Вот что получилось:
Код примера:
Создание анимированных и видео баннеров
Рассмотрим на примере как сделать анимированный баннер с помощью программы Ulead GIF Animator .
В меню «Файл » выбираем пункт «Мастер анимации ». В появившемся окне задаем размер будущего баннера. На следующем шаге загружаем подготовленные изображения:
Затем задается скорость смены картинок в анимации. В маленьком окне эта скорость демонстрируется с помощью меняющихся цифр.
Адаптивность — это один из важных критериев для сайтов, которые сейчас создаются. Многие пользователи используют экраны мобильных телефонов для просмотра веб-ресурсов. На веб-сайтах часто можно встретить баннерную рекламу, и традиционные рекламные баннеры не являются гибкими. Flash и анимированные GIF-баннеры имеют фиксированный размер в пикселях, поэтому они не совместимы с современными адаптивными макетами.
Нам нужен новый способ сделать баннерную рекламу.
Нам нужны адаптивные баннеры …
Новый формат для баннерной рекламы
Единственный способ сделать рекламные баннеры такими же отзывчивыми, как и наши макеты HTML5, — это сделать их также с HTML5. Сначала это может звучать как сумасшедшая идея, но, уверяю вас, это не так. На самом деле, есть много преимуществ для рекламы с HTML.
- HTML-объявления полностью доступны , а семантическая разметка делает их совместимыми с различными разрешениями.
- Текст, изображения, видео, Javascript и формы могут быть использованы в баннере так же, как любая веб-страница.
- Баннеры могут использовать динамические серверные скрипты и базы данных, если это необходимо.
- HTML-объявления могут занимать очень мало дискового пространства.
- Обслуживание баннера по сути такое же, как веб-хостинг.
- Нет новой технологии для веб-разработчиков — она такая же, как обычная веб-разработка.
- и, конечно, HTML5-объявления можно адаптировать к любому размеру с помощью медиа-запросов CSS3 — это как раз то, что нам нужно для адаптивных баннеров!
Итак, как мы можем сделать отзывчивую рекламу?
Единственная хитрость заключается в том, чтобы сделать размеры iframe динамическими с помощью медиазапросов CSS3, я расскажу об этом чуть позже … Но в основном, все!
Посмотрим как это работает
Вот пример объявления HTML5, показанного в популярном размере 125×125 пикселей:
А вот то же объявление с гибкой шириной:
Обратите внимание, как реагирует второе рекламное объявление, когда вы изменяете размер окна вашего браузера … Довольно круто! 🙂
Адаптивные макеты требуют, чтобы элементы страницы имели переменную ширину, поэтому баннеры теперь должны следовать этому требованию.
Высота баннера не имеет большого значения в адаптивном дизайне, поэтому мы можем использовать любую высоту, которая нам нравится. Но выбор высоты не означает, что наше объявление застряло на этой высоте, мы можем определить несколько высот для каждого объявления!
Чтобы обеспечить обратную совместимость, адаптивные объявления должны использовать ту же высоту пикселей, что и традиционные размеры баннеров.
Теоретически мы могли бы создавать адаптивные баннеры, которые работают с любой шириной или высотой, но это непрактично для создания или тестирования.
Я предлагаю придерживаться минимальной ширины 88 пикселей и иметь следующий набор стандартных высот:
- 31px «микро»
микробар (88 х 31) - 60px «кнопка»
кнопка 2 (120 х 60)
полу баннер (234 х 60)
полный баннер (468 х 60) - 90px «баннер»
кнопка 1 (120 х 90)
таблица лидеров (728 х 90) - 125px «маленький прямоугольник»
квадратная кнопка (125 х 125) - 250px «средний прямоугольник»
вертикальный баннер (120 х 240 * достаточно близко!)
квадратное всплывающее окно (250 х 250)
средний прямоугольник (300 х 250) - 400px «большой прямоугольник»
вертикальный прямоугольник (240 х 400) - 600px «небоскреб»
небоскреб (120 х 600)
широкий небоскреб (240 х 600)
объявление на полстраницы (300 x 600)
Семь пиксельных высот, которые я выбрал выше, дают нам хороший диапазон по вертикали и с переменной шириной, мы покрываем самые популярные размеры баннерной рекламы, используемые сегодня. Конечно, как и в случае с традиционными баннерами, вы можете создавать нестандартные размеры, если они вам нужны.
Не только это, но моя демонстрационная баннерная реклама в целом стоит менее 25 КБ (HTML, CSS и изображение JPG). Это меньше, чем максимальный размер файла для одного маленького баннера!
Опробуйте эти новые размеры баннеров с помощью программы проверки адаптивных объявлений .
Изменение размера фреймов с помощью медиазапросов CSS
Иногда вам может потребоваться адаптивная высота для рекламы, для этого вам нужно изменить размер iframe с помощью медиазапросов CSS. Я считаю, что лучший способ сделать это — установить ширину и высоту iframe равными 100% и поместить их в div с конкретными размерами, установленными в CSS. Вот как это выглядит:
< div id = "ad" > < iframe src = "ad.html" border = "0" scrolling = "no" allowtransparency = "true" width = "100%" height = "100%" style = "border:0;" > < / iframe > < / div > |
А вот и CSS:
/* default height */ #ad { height:60px; } @media only screen and (height:90px) { /* 90 pixels high */ #ad { height:90px; } } @media only screen and (height:125px) { /* 125 pixels high */ #ad { height:125px; } }
/* default height */ #ad { height : 60px ; @media only screen and (height:90px) { /* 90 pixels high */ #ad { height : 90px ; @media only screen and (height:125px) { /* 125 pixels high */ #ad { height : 125px ; |
Отслеживание показов и кликов
Самое лучшее в объявлениях HTML5 — их можно отслеживать с помощью Google Analytics, как и на обычных веб-сайтах.
Баннер (англ. banner - флаг, транспарант) - графическое изображение рекламного характера, аналогичное рекламному модулю в прессе. Может быть как статичным изображением или даже текстом, так и содержать анимированные элементы (вплоть до видео и интерактивных объектов). Как правило, может содержать гиперссылку на сайт рекламодателя или страницу с дополнительной информацией. Задачи у баннера следующие. Во-первых, продавать товар. А значит — привлечь внимание посетителя, заинтересовать потенциального клиента рекламируемой товаром или услугой, подтолкнуть к переходу на сайт и побудить к действию (Call To Action). Именно CTA и является конечной целью рекламы. И, во-вторых, задачей баннера является имиджевая или брендовая реклама, цель которой повысить узнаваемость бренда и составить положительный имидж о бренде.
Популярные виды объявлений на сайте:
- Графический - простой вид баннера для рекламы в Интернете. Состоит из изображения определенного размера и содержит ссылку на рекламный ресурс.
- Флеш-баннер - имеет большие возможности для анимации, это позволяет лучше передать информацию с помощью комбинации векторной и растровой графики.
- HTML5-баннер -комбинация HTML-элементов с применением анимаций и хорошего визуального оформления, адаптированных под любые устройства и браузеры.
Главные отличия HTML от других типов баннеров
По сравнению с другими методами создания баннеров, технологии HTML5 дают ряд преимуществ для привлечения аудитории на ресурс:
- Объявления в таком формате будут одинаково отображаться на всех устройствах без дополнительных расширений для браузера.
HTML5 предоставляет больше возможностей для интеграции в свои рекламные объявления формы, кнопки социальных сетей, календари, карты и другие приложения. - Небольшой вес и использование меньших ресурсов не влияет на скорость загрузки страниц в браузере. Флеш-технологии не позволяют добиться такого результата.
- Для оценки эффективности баннеров на HTML5 можно просмотреть статистику в Google Analytics. Там представлена различная информация о гостях и переходах по ссылкам.
Существенным недостатком флеш-технологий стал постепенный отказ от них крупных компаний, таких как Apple, Mozilla и Amazon. Основным толчком для исчезновения Flash стал Google. Сначала они отключили Flash-анимацию в Google Chrome, а затем отказались от Flash-объявлений в своих сервисах поисковой рекламы, отдав предпочтение HTML5.
Способы создания HTML-баннеров
Разработка баннера начинается с создания отдельной страницы и встраивается на сайт через «iframe». Существует несколько методов разработки рекламных баннеров на сайт, мы рассмотрим самые популярные.
1. Создание фрейма с помощью CSS3 и JavaScript
Фрейм позволяет загружать в область заданных размеров любые независимые документы. Это может быть разный HTML-код с использованием стилей и скриптов для оформления. Также возможна реализация баннера через область «canvas», в которой разрабатываются анимации, рисунки, графики и даже игры при помощи JavaScript. Для ускорения разработки разрешается воспользоваться сторонними библиотеками, например CreateJS .
Преимущества :
- Функционал не ограничен никакими программами, можно реализовать что угодно.
Недостатки :
- Такой процесс довольно сложный и требует особых навыков верстки.
- Большие трудозатраты по времени относительно других способов.
2. Adobe Edge Animate
Тем, кто знает Adobe After Effects, интерфейс программы Adobe Edge Animate покажется очень знакомым. У Adobe Edge Animate более ужатый функционал, направленный на разработку простого анимированного контента с использованием HTML5, JavaScript и CSS3. Программа поддерживает импорт таких форматов, как.svg, .png, .jpeg, .gif, HTML; поддержка video и audio форматов.
Имеется более 30 встроенных эффектов, что упрощает время создания качественной анимации в несколько раз:
Преимущества :
- Множество доступных видеоуроков в Сети по использованию программы.
- Простой функционал, большинство процессов автоматизированы.
- Программа не требует знаний HTML5, JavaScript и CSS3.
- По окончанию работы получаем все необходимые документы для размещения баннера на сайте. Images - папка с графическими элементами баннера, несколько файлов JavaScript, html и файл формата An - для последующего редактирования файла в программе.
- Готовый баннер поддерживается всеми современными браузерами и мобильными приложениями, соответствует всем техническим требованиям рекламных кампаний в Яндекс и Google.
Недостатки :
- Интерфейс только на английском языке.
- С 2015 года компания Adobe прекратила развитие проекта Adobe Edge Animate, программа с того времени не обновлялась и достигла своего предела в развитии. Edge Animate все еще доступен для скачивания в архивах Creative Cloud.
3. Adobe Animate CC
Animate CC - это переименованный продукт Adobe Flash Professional. В последнее время технология Flash растеряла доверие пользователей, программа нуждалась в смене названия и нескольких доработках. По сути, это та же самая программа Flash Professional, но в которой файлы дополнительно сохраняются в HTML5 и JavaScript.
Интерфейс очень схож с Flash Professional, но возможности у программ различаются.
Преимущества :
- Возможность создания трехмерной графики. Имеется инструмент «камера», позволяющий снимать глубину кадра для настоящей анимации.
- В отличие от Edge Animate программа Animate CC имеет большой выбор векторных кистей и возможность работы с растровой графикой.
- Программа относительно новая, поэтому Adobe активно развивает проект, выпускает обновления и совершенствует Animate CC.
- Имеется русскоязычная версия.
- Расширенные возможности экспорта файла в форматы: JavaScript/Html, jpeg, png, oam, svg, mov, gif. Нажатием одной кнопки сохраняются элементы баннера в спрайтах, тем самым уменьшая время загрузки баннера.
Недостатки :
- Новизну программы также отнесем к недостаткам. Уроков по созданию анимации в Animate CC не так много, как у Adobe Edge Animate. Поэтому работу некоторых функций нужно изучать самостоятельно, что дается непросто. Программа достаточно сложная для самостоятельного изучения, но разобраться можно.
- Некоторые функции не автоматизированы, как в Edge Animate, что также увеличивает время создания баннера.
4. Google Web Designer
Google порадовал нас бесплатным редактором, специально созданным для реализации html-баннеров. Google Web Designer полностью заточен на реализацию рекламы, основной уклон которой направлен на AdWords.
Если мы посмотрим на окно создания нового файла, заметим, что в программу уже встроены размеры шаблонов рекламы.
Преимущества :
- Простой интерфейс.
- Наличие шаблонов для рекламы в google.
- Полностью бесплатная программа.
- Наличие русскоязычной версии.
- Заложен адаптивный дизайн баннеров, html-баннер будет отлично выглядеть в любом разрешении экрана.
Недостатки :
- Функционал Google Web Designer достаточно узок для создания шедевров анимации. Программа сильно ограничена шаблонами.
- Нехватка обучающих программ. Справки Google недостаточно для полноценного обучения функционалу.
Все способы, представленные выше, не новые, но они проверенные. А значит, есть гарантия, что созданные html-баннеры пройдут модерацию на большинстве рекламных площадок, так как их технические требования соответствуют общим стандартам.
Сделаем рекламный баннер с помощью CSS3. В настоящее время полностью поддерживают анимации CSS3 только браузеры Firefox и WebKit. Но достаточно просто заставить баннер работать в других браузерах. Однако, не следует ожидать великолепного функционирования везде (особенно в IE 7 и старше) экспериментов с новейшими техниками CSS.
Примечание: Для сохранения пространства на странице все префиксы производителей браузеров опущены. Смотрите код в исходниках.
Разметка HTML
Сначала рассмотрим структуру баннера в HTML. На данном этапе мы должны представить, как будет функционировать анимация:
Потерялся?
Расслабься - мы поможем.
Для более глубокого понимания структуры разметки сфокусируемся на лодке:
С лодкой происходят три анимации:
Выскальзывание лодки слева. Применяется для неупорядоченного списка (группа).
Имитация раскачивания лодки на воде. Применяется к элементу списка (лодка).
Появление знака вопроса. Применяется к элементу div (знак вопроса).
Если посмотреть на демонстрационную страницу, то можно увидеть, что анимация для пункта списка (лодки) также действует на элемент div внутри него (Знак вопроса). Также анимация "выскальзывания" для неупорядоченного списка действует на пункт списка (лодку и знак вопроса).
Следовательно, можно сделать вывод, что дочерние элементы получают анимации родителей в дополнение к собственным действиям. Теперь остается только перечислить структуры родитель/наследник.
CSS
Прежде, чем начинать разбор создания анимации, нужно обеспечить обратную совместимость со старыми браузерами.
Обратная совместимость
Мы обеспечим обратную совместимость просто задав стили разметки так, как будто анимаций CSS не существует совсем. Если кто-то будет смотреть страницу в старом браузере, то увидит обычную статичную картинку, а не пустое белое место.
Например: если использовать CSS? подобный ниже приведенному, то будут проблемы:
/* НЕПРАВИЛЬНО! */ @keyframe our-fade-in-animation { 0% {opacity:0;} 100% {opacity:1;} } div { opacity: 0; /* Данный div скрыт по умолчанию - ой!*/ animation: our-fade-in-animation 1s 1; }
Если браузер не поддерживает анимации, то элемент div останется невидимым для пользователя.
А вот так мы обеспечим обратную совместимость со старыми браузерами:
/* ВЕРНО */ @keyframe our-fade-in-animation { 0% {opacity:0;} 100% {opacity:1;} } div { opacity: 1; /* Данный div видим по умолчанию */ animation: our-fade-in-animation 1s 1; }
Теперь элемент div будет выводиться даже если анимация не может запуститься. А в современных браузерах div будет сначала скрыт в ходе анимации.
Основа
Теперь мы знаем как обеспечить обратную совместимость (что поможет избежать проблем при работе с реальными проектами). Пришла пора создать основу нашего кода CSS.
Нужно помнить о 3 моментах:
Так как баннер будет использоваться на разных сайтах, мы сделаем все наши селекторы CSS особенными. Все они будут начинаться с идентификатора #ad-1. Таким образом мы постараемся избежать перекрытия нашего кода и кода сайта.
Мы намерено игнорируем задержку анимации в установках. Если использовать задержку анимации при задании стилей с видимостью элементов по умолчанию, то структура баннера будет нарушаться внезапным исчезновением или появлением частей картинки после завершения анимации. Задержка анимации имитируется длительностью и настройкой кадров.
Когда возможно используем одну анимацию для нескольких элементов. Таким образом мы экономим время и сокращаем размер кода.
Итак создаем основу для нашего баннера. Установим для нее относительное позиционирование чтобы внутренние элементы можно было корректно размещать. Также будет скрывать все, что выходит за рамки элемента:
#ad-1 { width: 720px; height: 300px; float: left; margin: 40px auto 0; background-image: url(../images/ad-1/background.png); background-position: center; background-repeat: no-repeat; overflow: hidden; position: relative; box-shadow: 0px 0px 6px #000; }
Затем задаем стили для текста и полей ввода. Вызываем соответствующие анимации. Также нужно убедиться, что содержание имеет наивысший z-index для движущихся частей, чтобы они не перекрывались:
#ad-1 #content { width: 325px; float: right; margin: 40px; text-align: center; z-index: 4; position: relative; overflow: visible; } #ad-1 h2 { font-family: "Alfa Slab One", cursive; color: #137dd5; font-size: 50px; line-height: 50px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 7s 1 ease-in-out; /* Появление h2 с имитацией задержки */ } #ad-1 h3 { font-family: "Boogaloo", cursive; color: #202224; font-size: 31px; line-height: 31px; text-shadow: 0px 0px 4px #fff; animation: delayed-fade-animation 10s 1 ease-in-out; /* Появление h3 с имитацией задержки */ } #ad-1 form { margin: 30px 0 0 6px; position: relative; animation: form-animation 12s 1 ease-in-out; /* Выскальзывание формы для ввода email адреса с имитацией задержки */ } #ad-1 #email { width: 158px; height: 48px; float: left; padding: 0 20px; font-size: 16px; font-family: "Lucida Grande", sans-serif; color: #fff; text-shadow: 1px 1px 0px #a2917d; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border:1px solid #a2917d; outline: none; box-shadow: -1px -1px 1px #fff; background-color: #c7b29b; background-image: linear-gradient(bottom, rgb(216,201,185) 0%, rgb(199,178,155) 100%); } #ad-1 #email:focus { background-image: linear-gradient(bottom, rgb(199,178,155) 0%, rgb(199,178,155) 100%); } #ad-1 #submit { height: 50px; float: left; cursor: pointer; padding: 0 20px; font-size: 20px; font-family: "Boogaloo", cursive; color: #137dd5; text-shadow: 1px 1px 0px #fff; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border:1px solid #bcc0c4; border-left: none; background-color: #fff; background-image: linear-gradient(bottom, rgb(245,247,249) 0%, rgb(255,255,255) 100%); } #ad-1 #submit:hover { background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(255,255,255) 100%); }
Теперь зададим стили для воды и вызовем соответствующую анимацию:
#ad-1 ul#water{ /* Если нужна другая анимация для воды, ее можно добавить здесь */ } #ad-1 li#water-back { width: 1200px; height: 84px; background-image: url(../images/ad-1/water-back.png); background-repeat: repeat-x; z-index: 1; position: absolute; bottom: 10px; left: -20px; animation: water-back-animation 3s infinite ease-in-out; /* Имитация плеска волн */ } #ad-1 li#water-front { width: 1200px; height: 158px; background-image: url(../images/ad-1/water-front.png); background-repeat: repeat-x; z-index: 3; position: absolute; bottom: -70px; left:-30px; animation: water-front-animation 2s infinite ease-in-out; /* Другая имитация плеска волн. Анимация будет выполняться немного быстрее для создания эффекта перспективы. */ }
Зададим стили для лодки и её элементов. Также вызываем соответствующие анимации:
#ad-1 ul#boat { width: 249px; height: 215px; z-index: 2; position: absolute; bottom: 25px; left: 20px; overflow: visible; animation: boat-in-animation 3s 1 ease-out; /* Slides the group in when ad starts */ } #ad-1 ul#boat li { width: 249px; height: 215px; background-image: url(../images/ad-1/boat.png); position: absolute; bottom: 0px; left: 0px; overflow: visible; animation: boat-animation 2s infinite ease-in-out; /* Simulate the boat bobbing on the water - similar to the animation already used on the water itself. */ } #ad-1 #question-mark { width: 24px; height: 50px; background-image: url(../images/ad-1/question-mark.png); position: absolute; right: 34px; top: -30px; animation: delayed-fade-animation 4s 1 ease-in-out; /* Fade in the question mark */ }
Теперь создадим стили для облаков. Для них мы будем использовать анимацию с эффектом бесконечного движения. иллюстрация демонстрирует суть идеи:
А вот и код CSS:
#ad-1 #clouds { position: absolute; top: 0px; z-index: 0; animation: cloud-animation 30s infinite linear; /* Прокручиваем облака влево, сбрасываем и повторяем */ } #ad-1 #cloud-group-1 { width:720px; position: absolute; left:0px; } #ad-1 #cloud-group-2 { width: 720px; position: absolute; left: 720px; } #ad-1 .cloud-1 { width: 172px; height: 121px; background-image: url(../images/ad-1/cloud-1.png); position: absolute; top: 10px; left: 40px; } #ad-1 .cloud-2 { width: 121px; height: 75px; background-image: url(../images/ad-1/cloud-2.png); position: absolute; top: -25px; left: 300px; } #ad-1 .cloud-3 { width: 132px; height: 105px; background-image: url(../images/ad-1/cloud-3.png); position: absolute; top: -5px; left: 530px; }
Анимации
Напоминание: Начиная с данной точки ничего в действительности не анимируется. Если посмотреть наш баннер сейчас, то вы увидите статичную картинку. Здесь создаются анимации, которые вызываются в выше приведенном коде.
Теперь в вдохнем жизнь в нашу прекрасную статичную картинку:
/* Анимация с имитацией задержки используется для вывода нескольких элементов. Имитация задержки осуществляется запуском процесса с 80% продолжения анимации (а не сразу). Так можно имитировать любую задержку: */ @keyframes delayed-fade-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } /* Анимация для вывода формы с адресом email и кнопкой. Также используется имитация зхадержки */ @keyframes form-animation { 0% {opacity: 0; right: -400px;} 90% {opacity: 0; right: -400px;} 95% {opacity: 0.5; right: 20px;} 100% {opacity: 1; right: 0px;} } /* Данная анимация используется для вывода лодки за экрана в начале ролика: */ @keyframes boat-in-animation { 0% {left: -200px;} 100% {left: 20px;} } /* Анимация для облаков. Первая группа облаков начинает движение из центра, а вторая - справа от экрана. Первая группа медленно выводится с экрана, а вторая - появляется справа. Как только левая группа полностью скроется, облака очень быстро возвращаются в начальное положение: */ @keyframes cloud-animation { 0% {left: 0px;} 99.9999% {left: -720px;} 100% {left: 0px;} } /* Три последних анимации практически одинаковые - разница заключается в позиционировании элементов. Они имитируют плеск волн океана: */ @keyframes boat-animation { 0% {bottom: 0px; left: 0px;} 25% {bottom: -2px; left: -2px;} 70% {bottom: 2px; left: -4px;} 100% {bottom: -1px; left: 0px;} } @keyframes water-back-animation { 0% {bottom: 10px; left: -20px;} 25% {bottom: 8px; left: -22px;} 70% {bottom: 12px; left: -24px;} 100% {bottom: 9px; left: -20px;} } @keyframes water-front-animation { 0% {bottom: -70px; left: -30px;} 25% {bottom: -68px; left: -32px;} 70% {bottom: -72px; left: -34px;} 100% {bottom: -69px; left: -30px;} }
Заключение
В ходе данного урока мы изучили несколько ключевых концепций:
- Элементы наследники получают анимации своих родителей в дополнение к своим анимациям.
- При создании баннера надо стремиться использовать уникальный идентификатор, чтобы избежать перекрытия кода с существующим проектом CSS.
- Положение и стиль элементов нужно выбирать так, как будто анимация не доступна, чтобы обеспечить обратную совместимость.
- По возможность нужно использовать одну анимацию для нескольких элементов.