Простое создание баннеров на css3. Создание адаптивных HTML5 баннеров FullScreen. Анимированный баннер на CSS3

Простое создание баннеров на css3. Создание адаптивных HTML5 баннеров FullScreen. Анимированный баннер на CSS3

02.07.2020

Сегодня мы собираемся создать баннер используя CSS3 анимацию.

В настоящее время только Firefox и WebKit-браузеры поддерживают CSS-анимацию, но мы будем рассматривать и то, как мы можем сделать, чтобы эти баннеры также функционировали в других браузерах (которые я называю браузерами 18-го века). Однако, не следует ожидать отличной поддержки во всех браузерах (в частности, для IE 7 и ниже), когда экспериментируешь с современными CSS-технологиями.

Итак, давайте создадим анимированные баннеры!

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

HTML-разметка

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



> Lost at sea?>
> Relax - we"ve got your rudder.>
>


>
>


  • >
  • >
  • >
    >

    • >
    • >
    • >
      >
      >

        >
        >
        >
        >

        • >
        • >
          >
          >

          Для того чтобы понять структуру нашей разметки, давайте сосредоточимся на лодке на секунду:


            >
            >
            >
            >

            Теперь, посмотрим на первый баннер на демонстрационной странице . Там есть три отдельных анимации, которые происходят на корабле:

            • Анимация - когда лодка скользит с левой стороны. Это применяется непосредственно к неупорядоченному списку (группа элементов лодки).
            • Анимация - которая придает лодке эффект раскачивания, моделируя лодку плавающую по воде. Это применяется непосредственно к элементам списка (к лодке).
            • Анимация - которая скрывает вопросительный знак. Это применяется к div-у (question-mark).

            Если вы не страдаете морской болезнью, то еще раз гляньте на демо-страницу . Вы увидите, что анимация которая применяется к элементу списка (лодке), заставляя лодку приподниматься, также влияет на DIV внутри него (со знаком вопроса). Кроме того, "slide in" анимация, которая применяется к неупорядоченному списку (группе), также влияет на элемент списка и DIV внутри него (на лодку и вопросительный знак). Это приводит нас к важным наблюдениям:

            Дочерние элементы наследуют анимацию от своих родителей, в дополнение к их собственной анимации. Эти знания добавлены в наш арсенал, но число дочерних/родительских элементов при создании анимации взорвут ваш мозг (и процессор на ноутбуке вашей бабушки)!

            CSS

            Прежде чем мы перейдем к действительно интересному материалу и начнем создавать анимацию, мы еще должны создать стили для браузеров, которые застряли в 18 веке.

            Резервные стили для старых браузеров

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

            Например: если кто-то использует CSS вроде этого, будут проблемы:

            /* НЕПРАВИЛЬНЫЙ СПОСОБ! */


            0% { opacity: 0 ; }
            100% { opacity: 1 ; }
            }

            Div {
            opacity: 0 ; /* Этот блок спрятан по-умолчанию!*/

            }

            Если браузер пользователя не поддерживает анимацию, баннер будет оставаться невидимым для него. И тогда клиент сломает дверь в офисе продавца - с бензопилой в руках - и потребует, чтобы ему объяснили, почему они не продали его товар! И если они не в состоянии понять, что браузер может быть настолько жалким, их жизнь закончится ужасно, и последними словами их будут проклятия в адрес Internet Explorer ... :)

            Но не волнуйтесь, мы предоставим расширенную поддержку браузеров:

            /* ПРАВИЛЬНЫЙ СПОСОБ */

            @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.

            Есть три ключевые вещи, которые нужно иметь в виду:

            • Поскольку эти объявления могут быть использованы на различных веб-сайтах, мы сделаем все наши CSS-стили очень специфичными . Мы будем начинать объявление каждого селектора с id: #ad-1. Это позволит оградить наши стили баннера от вмешательства существующих стилей и элементов.
            • Мы будем целенаправленно игнорировать функцию задержки анимации при создании нашей анимации. Если бы мы использовали функцию задержки анимации, а также дизайн для наших элементов правильным способом (видимым по умолчанию), все это было видно на экране прежде чем анимация, наконец, начала бы играть. Именно поэтому анимация начинается немедленно, что позволяет скрывать элементы с экрана, до тех пор пока они не будут нам нужны. Мы будем моделировать задержку анимации за счет увеличения продолжительности и ручной настройки ключевых кадров. Вы увидите примеры этого, когда мы начинаем создавать анимацию.
            • По возможности, используйте одну анимацию для нескольких элементов . Таким образом, мы можем сэкономить много времени и сократить разрастание кода. Вы можете создать несколько различных эффектов, в одной и той же анимации, регулируя продолжительность и переходы.

            Итак, мы начнем создание нашего рекламного баннера. Давайте убедимся, что он имеет относительное расположение (position: relative), чтобы внутри него элементы могли быть размещены правильно. Мы также должны убедиться, что установлено свойство overflow: hidden , чтобы скрывать всё лишнее:

            #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 ;
            }

            #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 ;

            animation: delayed-fade-animation 7s 1 ease-in-out; /* H2 будет исчезать с симуляцией задержки анимации */
            }
            #ad-1 h3 {

            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 ) ;

            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; /* Перемещение группы вначале */
            }
            #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; /* Имитация лодки покачивающейся на воде - похожая анимации уже используется для самой воды. */
            }
            #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; /* Прячем вопросительный знак */
            }

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

            Вот эти стили:

            #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 ;
            }

            Уффф! Тут было много CSS-кода. Но самое интересное дальше!

            Анимация

            Помните: До этого момента, никакой, собственно, анимации не было. Если бы вы просмотрели баннер сейчас, вы бы увидели то, что будет показывать даже старый браузер - статическое объявление. С ейчас мы фактически создадим анимацию, которую мы уже вызвали в нашем CSS-коде.

            Теперь, когда наш баннер отображается хорошо, давайте оживим это статическое объявление! Перейдем прямо к коду - я расскажу вам в комментариях, что будет происходить:

            Заключение

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

            1. Дочерние элементы наследуют анимацию своих родителей в дополнение к их собственной анимации. Мы можем использовать это для создания более сложной анимации.
            2. Для стилей нашей рекламы мы должны использовать очень специфичные селекторы, чтобы наши объявления не были переопределены другими стилями сайта.
            3. Необходимо задавать такие стили для элементов, что если наша анимация не в состоянии проигрываться, то объявление все равно должно прилично выглядеть.
            4. Когда это возможно, использовать одну анимацию для нескольких элементов - экономим время и препятствуем разрастанию кода.
            5. Часто ссылаемся на Internet Explorer, как на "браузер 18-го века" и при этом с отвращением и гневом трясем кулаком. :)

            Удачи в ваших экспериментах с CSS.

            Привет, значит задача стоит такая: «Создать адаптивный HTML баннер, который будет подстраиваться под различные размеры экрана, у него будет счётчик оставшегося времени и кнопка закрыть и всё это должно ещё и клики считать, чтобы собирать статистику о переходах по ТТ Adriver».

            Сначала разберёмся, какие собственно самые востребованные форматы есть при создании таких баннеров:

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

            1. FullScreen баннеры — баннеры, которые вы могли видеть в метро или на сайте wifi , данные баннеры раскрываются на весь экран, имеют счётчик и кнопку закрытия. Для создания таких баннеров мы просто подготавливаем статичную картинку или простую gif анимацию(не более 600КБ) и далее верстаем всё на HTML.

              FullScreen Баннер

            2. FullWidth баннеры — уже интереснее, но на самом деле это просто обычный HTML5 баннер, только растягивающийся на 100% ширины экрана, но имеющий при этом фиксированную высоту. В таких баннерах часто используется анимация и они уже создаются в таких программах, как google web designer , Adobe Edge Animate , Adobe Animate CC . Лично я активно юзаю Edge Animate, он удобнее, быстрее и есть возможность быстрой выгрузки в HTML5. При создании таких баннеров, изначально делается раскадровка с вариантами того, как этот баннер будет выглядеть при разных размерах экрана, выглядит всё это дело примерно так:

              Раскадровка баннера на 100% ширины

            3. Баннер с фиксированным размером или статичный — ну это совсем просто. Тут создаётся просто креатив или раскадровка и всё, что остаётся сделать — это прописать код для счёта кликов. Для создания таких баннеров я часто использую Adobe Photoshop или Edge Animate — если это анмиация. Никогда не используйте тут GIF! Вы никогда не сможете выгрузить gif анимацию в размере до 600КБ, а если анимация весит больше, то её не пропустят. Обычный HTML баннер не дотянет по весу и до 200КБ, а значит, что тут можно творить по полной.

            Раскадровка баннера с фиксированными размерами

            Гайд по созданию FullScreen баннера по всем правилам

            Создание такого баннера подразумевает, что его размер будет изменяться при измении размера экрана, а значит он будет занимать всю его площадь, примерно так:

            Это значит, что изображение должно одианово хорошо смотреться на всех устройствах, от сюда вывод, что оно должно быть достаточно хорошего качества и размер приближен к квадрату (фиксированных размеров нет, тут всё довольно лояльно). В даный момент мы оринтируемся на мобильнуе устройства(mobile) и планшеты(tablet), потому берём прямоугольник, для просмотра в портретном режиме(portrait). Заходим в Photoshop и создаём документ необходимого размера, в данном случае это 536х714 :

            Gif исходник для создания FullScreen баннера

            Я создал гифку из двух кадров, вес у неё 242КБ, вес у нас всегда должен быть до 600КБ, помним это. Теперь нам необходимо превратить это в собственно баннер на HTML. Открываем инструкцию по созданию FullScreen баннеров , берём из неё технические требования и закрываем, она написана очень коряво. Забудьте про Flash, он пал смертью храбрых, у нас только HTML5, потому нам нужны технические требования для создания баннеров на коде Ajax.

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

            Открываем HTML файл из моего шаблона и видим:

            Стандартный код баннера FullScreen


            Кнопка закрыть

            Как же читается сам клик с баннера? И почему мы не прописывали ниаких ссылок на страницы, на которые должен вести баннер? Так вот… Система Adriver позволяет прописывать ссылки для перехода на сайт, после загрузки баннеров в систему, получается у нас в исходнике мы лишь прописываем переменную, которая заменяется при загрузке в систему сама, уже не наша работа. В данном случае у нас клик прописывается для всего контейнера, в котором находится наш баннер, в общем всё, что мы помещаяем в

            у нас является баннером и с этого считываются клики. Для других баннеров, другие технические тредования и там клик считывается по-другому, сечас мы рассматриваем конкретный пример.

            Контейнер с баннером

            В других уроках я расскажу, как создать баннер на 100% ширины экрана с анимацией и как по всем правилам создать и подготовить макет для вёрстки сайта.

            Файлы из урока:

            1. Готовые баннеры FullScreen: клик

            Спасибо за внимание.

            Адаптивный веб-дизайн - значительное достижение для всего Интернета. Мы больше не скованы давно устаревшей моделью «печатной страницы» со статическим содержимым, разбитым на области фиксированного размера. Сегодня Интернет способен жить, дышать и приспосабливаться, заполняя всё пространство, доступное на экранах различных устройств, начиная от мобильных телефонов - и вплоть до огромных видеодисплеев. Это то, какой и предполагалась Глобальная сеть.

            Но есть небольшая проблема. Веб-сайты зачастую содержат баннерную рекламу и традиционные баннеры, не обладающие особой гибкостью. Как flash-, так и GIF-баннеры имеют фиксированные размеры, из-за чего несовместимы с современной адаптивной вёрсткой. Нам необходим новый метод создания баннерной рекламы. Нам нужны «адаптивные» баннеры…

            Новый формат баннеров

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

            • HTML-реклама доступна повсеместно , а семантическая разметка сделает её подходящей дляскрин-ридеров ;
            • текст, изображения, видео, скрипты и формы - всё это может быть использовано в баннере точно так же, как и на любой веб-странице;
            • при необходимости баннеры могут задействовать динамические сценарии и базы данных на серверной стороне ;
            • в баннер могут быть внесены изменения уже после его размещения ;
            • файл (набор файлов) HTML-баннера может иметь весьма скромный размер ;
            • banner serving , по существу, сводится к веб-хостингу ;
            • веб-разработчикам не нужно изучать что-либо новое - все технологии остаются теми же, что и при обычной веб-разработке;
            • и, конечно, при помощи CSS3 медиа-запросов можно заставить HTML5-рекламу «подстраиваться» под любые размеры - ведь именно такое поведение мы ожидаем от адаптивных баннеров!

            Как же этого достичь?

            Во-первых, баннер создается как резиновая HTML5-страница. Мы наполняем её текстом, изображениями, ссылками на требуемую страницу, украшая всё это при помощи CSS3. Во-вторых, такой баннер может быть размещен на любом веб-сайте посредством плавающего фрейма iframe. Есть одна хитрость, задействующая CSS3 медиа-запросы чтобы сделать динамическими размерности iframe’а, и вскоре я расскажу о ней… Однако, по большому счёту, это всё!



© 2024 beasthackerz.ru - Браузеры. Аудио. Жесткий диск. Программы. Локальная сеть. Windows