HTML5-Баннеры

от 2 299 руб.

RUB

Заказать

В настоящее время, HTML5-баннеры – единственный актуальный формат полноценной анимированной баннерной рекламы. Этот универсальный кроссплатформенный формат пришел на смену Flash-баннерам, имевшим ряд ограничений и недостатков.

Основными причинами такого отказа называются следующие:

• к Flash-технологии накопились претензии в области компьютерной безопасности и повышенного потребления процессорной мощности мобильных устройств;
• некоторые браузеры начали по умолчанию блокировать показ Flash;
• на мобильных устройствах iOs (iPhone, iPad) показ Flash был не предусмотрен производителем;
• популярность программ-блокировщиков баннерной Flash-рекламы;
• отказ от дальнейшей поддержки и развития Flash-технологии ее владельцем, компанией Adobe.

Анимированные HTML5-баннеры могут быть показаны без ограничений в любом браузере, на экране любого устройства, включая смартфоны, планшеты и медиа-ТВ. В этом и заключается их кроссплатформенность и универсальность.

Для заказчика использование HTML5-баннеров означает, прежде всего, расширение охвата аудитории без потерь.

Что может HTML5-баннер?

Многое. Ведь это самый передовой формат, привлекающий внимание пользователя и даже взаимодействующий с ним (интерактивный баннер).

С точки зрения анимации, такой баннер может показывать векторную анимацию (без потерь при масштабировании), анимацию персонажей, фотографий, логотипов, графиков и диаграмм, текста и даже 3D анимацию. С точки зрения интерактива, HTML5-баннер может реагировать на действия пользователя и предлагать ему дополнительный контент и возможности. С точки зрения медиа-носителей, HTML5-баннер может проигрывать видео, слайды и аудио-записи. С точки зрения адаптивности, HTML5-баннер может растягиваться на всю ширину страницы, раскрывать дополнительные панели или разворачиваться на весь экран.

Рассмотрим основные виды HTML5-баннеров.

Анимированный HTML5-баннер фиксированного размера.
Наиболее популярный формат в большинстве рекламных сетей. Ширина и высота нужных баннеров выбираются из перечня принимаемых к размещению. Мы всегда подскажем самые распространенные размеры.

Тянущийся HTML5-баннер (адаптивный, резиновый).
Это баннер, который может растягиваться, занимая всю ширину (иногда высоту) экрана. (Подробнее можно узнать в данной статье)

Fullscreen HTML5-баннер.
Баннер, открывающийся на весь экран. Как правило, содержит таймер показа и кнопку “Закрыть”. Особенно популярен для показа на мобильных устройствах.

Часто такой баннер должен быть адаптивным с учетом различных ориентаций и разрешений мобильного устройства.

Раскрывающийся HTML5-баннер (расхлоп).
Сначала на экране присутствует только стартовая панель такого баннера (тизер). При выполнении заданного алгоритма (наведение мышки или нажатие, таймер или другие события на странице), открывается вторая часть баннера с дополнительной расширенной информацией.

HTML5 Видео баннер.

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

Игровые интерактивные баннеры.
Баннеры, призывающие пользователя включиться в игру, выполняя простые действия.

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

“Умные” HTML5-баннеры (калькуляторы).
Используются для вовлечения и взаимодействия с пользователем, предлагая ему немедленный расчет по нужным параметрам и заданной внутренним алгоритмом формуле (например, расчет кредита, ипотеки, расхода стройматериалов и прочие несложные операции).

Редактируемые HTML5-баннеры – в некоторых случаях заказчику требуется оперативно вносить в баннеры изменения, не прибегая к помощи разработчика (например, часто меняющиеся цены, проценты или котировки). Мы можем справиться с такой задачей и вывести необходимые параметры непосредственно в HTML-код баннера, где заказчик может самостоятельно внести правки. Можно предложить другое удобное вам решение по выводу данных, используемых баннером, во внешние файлы.

HTML5-баннеры, работающие с подгрузкой внешних данных и API.
На данный момент многие рекламные сети запрещают обращение баннера к внешним источникам. Однако, в случае, если баннер размещается на сайте, предоставляющем такую возможность, HTML5-баннер может запросить через API сайта необходимую информацию (текст, цифры, котировки) и обработав их по заданному алгоритму, показать пользователю.

3D HTML5-баннеры.
Такие баннеры привлекают внимание пользователя, создавая на странице объемные модели изображений.

HTML5 3D баннер может быть реализован в виде вращающегося объекта, грани которого содержат кадры баннера, в виде раскрывающейся книги или с использованием других 3D эффектов.

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

Если вы хотите заказать HTML5-баннер на нашем сайте, а креативная идея требует совмещения различных форматов – это всегда под силу нашим специалистам.

HTML5-баннер - что он из себя представляет технически?

Правильнее всего воспринимать HTML5-баннер, как мини web-сайт. Без преувеличений.

HTML5, давший название этому баннерному формату, является языком разметки web-страниц, проще говоря, верстки. И верстается по тем же законам, что и любой современный сайт. Он может содержать div-контейнеры, подключаемые шрифты, стили css и js-скрипты. Главным элементом является контейнер для анимаций canvas. Сама анимация реализуется с помощью java script, чаще с использованием специально разработанных для анимации js-библиотек.

Что там внутри? Зачем в архиве? Почему так много файлов?

Верно, ведь мы привыкли, что баннер – это один файл картинки JPG или “гифка” или “флешка”. Но вспомним, как мы писали выше, HTML5-баннер это, по сути, мини-сайт. Он содержит множество файлов и поставляется рекламной площадке в zip-архиве. Внутри архива находится главный файл HTML, файлы java-скриптов, библиотек, таблицы стилей и используемые изображения.

Примечание. В некоторых случаях рекламная площадка может потребовать предоставить весь баннер одним файлом, включив в него все используемые скрипты и изображения в формате base-64. Это не является проблемой для опытного разработчика. Однако такое требование увеличивает срок изготовления баннера и внесения в него изменений. К счастью, такое требование встречается нечасто.

Как мне посмотреть присланный HTML5-баннер на моем компьютере?

Очень просто. Распаковать zip-архив и открыть находящийся внутри HTML файл в вашем браузере.

Как проверить, что мне сделали правильный HTML5-баннер?

Если баннер создается для рекламных сервисов Google, то к вашим услугам прекрасный инструмент проверки качества работы дизайнера – on-line валидатор HTML5 от Google. Пользоваться им просто: загружаете ваш zip-архив с баннером и смотрите, прошел ли он проверку по чек-листу. Ошибки будут отмечены красными значками. Если их нет – ваш разработчик трудился не зря и баннер готов к размещению в Google adWords или Double Click.

В рекламных сетях Яндекс, Mail.ru, Рамблер, adFox, adRiver и прочих также осуществляется проверка на соответствие баннера техническим требованиям, после его загрузки на сайт системы. В случае проблем, вы можете получить комментарий модератора с описанием ошибки. Некоторые площадки предоставляют заказчику рекламы возможность предварительного просмотра баннера на тестовой странице.

И все-таки лучшей гарантией корректного изготовления HTML5-баннера являются опыт разработчика, его знание технических требований рекламных площадок и готовность оперативно исправить ошибки.

А баннер с анимацией на Java Script - это другое?

Не дайте себя запутать. “Java Script баннер”, “Canvas баннер” – речь идет именно о том, что принято называть “HTML5-баннер”. В зависимости от инструмента разработчика могут меняться js-библиотеки или правила верстки, но общая схема сборки остается одинаковой.

Как создать HTML5-баннер?

Самый популярный среди дизайнеров редактор для создания HTML5 анимаций – программа Adobe Animate.

Компания Google предлагает собственный инструмент разработки – Google Web Designer. Среди его плюсов – наличие множества встроенных шаблонов и возможность публикации баннера непосредственно для рекламных сервисов Google: adWords и Double Click. Среди минусов – ограниченные возможности анимации.

Некоторые дизайнеры, чаще американские, используют редактор и библиотеки Green Sock Animation Platform. Однако, у нас они не получили значительного распространения.

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

Технические требования к HTML5-баннерам.

Требования касаются:

• общего веса HTML5-баннера в кб.;
• структуры zip-архива, количество папок и файлов;
• перечень разрешенных форматов файлов;
• способа включения URL-ссылок по клику на баннере (прошивки баннера);
• перечень разрешенных js-библиотек на внешних хостингах;
• порядок и ограничения подключения видео и аудио-файлов;
• требования к оформлению рамки, дисклеймеров, частоте и количеству циклов анимации, нагрузке на процессор устройства.

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

Что мне делать с моими Flash-баннерами, созданными ранее?

Смотрите сами – крупнейшие рекламные сети больше не принимают Flash-баннеры к размещению, Flash-компоненты блокируются в браузерах и на iOs-устройствах, прекратил свою работу Swiffy (единственный адекватный on-line конвертер Flash-баннеров в HTML5).

Автоматическая конвертация Flash-формата в HTML5 практически невозможна – требуется, по сути, полная ручная пересборка в HTML5-редакторе. В такой ситуации правильным решением будет – заказать создание нового комплекта анимированных баннеров, в современном и универсальном формате HTML5.

А как же “гифки”?

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

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

Что это означает для рекламодателя?

Проблему лишнего веса. Да, ей подвержены даже баннеры. Все крупные рекламные площадки выставляют жесткие ограничения по весу баннера в килобайтах.

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

Если же анимация затрагивает смену нескольких сотен кадров, то вес gif-баннера возрастает, как выражаются на английском, “dramatically”, то есть, драматично. 20-секундная гифка весом в несколько мегабайт – обычное дело. И это крайне не нравится рекламным сетям, которые справедливо обеспокоены тем, сколько трафика придется загрузить пользователю для просмотра баннера.

Итак, если вам нужен баннер со множеством анимационных эффектов, персонажной анимацией, интерактивный, адаптивный или видео-баннер – выбор совершается в пользу заказа именно HTML5-баннера.

Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких «мудреных » мы и поведаем, как сделать баннер.

Что такое баннеры

Под баннером в интернете подразумевается прямоугольное рекламное изображение со статическим или динамическим (анимированным ) содержимым. Баннер может включать в себя как текст, так и графический рисунок. Баннер, как правило, снабжен ссылкой, активирующейся после щелчка по нему кнопкой мыши.

Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны » с тематикой ресурса:

Хорошо бы узнать, как можно сделать баннер для сайта. Но для начала нужно разобраться с существующими типами баннеров. Различают следующие их типы:

• Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате 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 .

В меню «Файл » выбираем пункт «Мастер анимации ». В появившемся окне задаем размер будущего баннера. На следующем шаге загружаем подготовленные изображения:

Затем задается скорость смены картинок в анимации. В маленьком окне эта скорость демонстрируется с помощью меняющихся цифр.

Баннер (англ. 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-баннеры пройдут модерацию на большинстве рекламных площадок, так как их технические требования соответствуют общим стандартам.

Благодаря развитию веб-технологий и современных браузеров, мы можем создавать множество эффектов без использования Javascript. Это значительно упростило жизнь веб-разработчикам. Ведь сейчас мы можем создавать эффекты на чистом CSS без использования Javascript. Поэтому в данной статье я хочу рассказать Вам о том, можно ли создавать баннеры на чистом CSS, что для этого потребуется, а также о минусах и плюсах данного подхода.

CSS3 дает большой спектр возможностей, ими лишь нужно правильно воспользоваться. В качестве примера хочу привести ссылки на мои прошлые работы "Персонажи на чистом CSS":

Для начала хочу привести примеры своих баннеров CSS. Возможно Вы их уже видели на сайте, но даже не догадывались с помощью чего и как они были созданы.

По поводу демо: у каждого примера (баннера) внизу присутствует длительность в секундах, а также кнопка "Обновить", которая начинает показ баннера сначала.

Баннер #1 — "Индивидуальное обучение сайтостроению" :

Данный баннер я создавал около 2-х дней. Почему так долго? Потому что для адаптации баннера (чтобы сделать его резиновым) ушло некоторое время при пересчете координат. Сейчас его размер зависит от ширины блока-родителя (в котором находится сам баннер CSS).

Этот баннер я создал буквально за 2-2.5 часа. Единственное, что здесь тормозило процесс создания — это выбор иконок. Потому что их необходимо было подобрать близкими по тематике баннера.

Данный баннер также растягивается в зависимости от ширина контейнера блока, в котором он находится. На его создание ушло примерно 1.5 часа.

Смотрятся такие баннеры очень красиво, но всё ли так просто? Давайте посмотрим на плюсы и минусы такого способа создания баннеров.

Преимущества и недостатки CSS баннеров:

Как создать баннер CSS?

1 Идея

Для начала необходимо точно знать какая анимация должна быть у баннера (что, куда и откуда должно двигаться и где появляться). Вы можете взять лист А4 и прорисовать куда будет двигаться каждый элемент и что на баннере должно быть.

Ведь нельзя начать создавать баннер, если Вы не знаете что он из себя должен представлять и как функционировать.

2 HTML структура

Следующим шагом необходимо создать HTML разметку таким образом, чтобы элементы можно было перемещать (и создавать для них анимацию). То есть нельзя сделать всё одним изображением, которое будет выезжать справа или слева и на этом анимация закончена.

Как правило есть один общий блок, в котором находятся все остальные. И в этом общем блоке мы можем управлять элементами как нам это необходимо.

3 CSS анимация

Завершающим этапом является создание анимации для блоков, а также написания стилей для них, потому что некоторые части анимации бывают скрыты по умолчанию.

Чтобы создать свой баннер, Вам необходимо хорошо владеть основами CSS и HTML.

Изучите базовую анимацию на CSS с помощью данного урока — .

Вывод

Все современные браузеры поддерживают CSS3 свойства, а, значит, и баннеры будут корректно отображаться в таких браузерах. Но с помощью JS плагинов можно создать баннеры CSS и для старых браузеров. Изучив основы анимации CSS, Вы поймете процесс создания баннеров и вскоре создадите свой первый баннер на чистом CSS! 😉

Так уж случилось, что мне нравится работать с CSS кодом, поэтому было интересно сделать кнопку ниже, которую можно использовать в качестве баннера, то есть сайт:

Как сделать анимацию в Фотошопе.

Но поскольку этот безобидный код может отпугивать пользователей своим объёмом символов, а картинка не является динамичной, то с помощью программы я сфотографировала участок экрана монитора с данной кнопкой, тем самым преобразовав её в изображение. Вы можете не использовать столь длинный путь, нарисовав картинку в . Но сначала нужно определиться с размерами будущего баннера. Их можно узнать в той баннерной сети, с которой вы планируете работать. Я же не была ограничена какими-либо рамками.

• "Анимация",
• "Слои" (горячая клавиша F7),
• "Инструменты".

Для изображения в форматах BMP и PNG слои никак не сделать, поэтому нужно (для JPEG и GIF этот пункт пропускаем):

Рис.1 Перенести изображение в Фотошопе.

Из-за того, что стирать элементы проще, чем дорисовывать, то мы продублируем, выделив (Рис.2), интересующий нас слой.

Затем, выделив (см. синий фон) один из слоя и указав только на нём глаз, орудуем пипеткой (I) , для автоматического определения и установки выбранного цвета, и карандашом (B) для удаления ненужных фрагментов путём их закрашивания в палитру фона. При этой процедуре я люблю увеличивать масштаб фотографий: если посмотреть на Рис.1, то он равен 100%, а я указываю в 300%, чтобы не затронуть лишние элементы. Также полезной функцией является прозрачность слоя (Рис.2).

Затем для каждого кадра проставляем око (глаз) только на те слои, которые должны отображаться на нём.

И установим для кадра тот промежуток времени, в течении которого пользователь его будет наблюдать, путём нажатия мышкой на секунды.