Простое создание баннеров на CSS3

(Ответов: 6, Просмотров: 1747)
  1. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    В данной статье хочу поделиться своим опытом в создании баннеров с помощью CSS3 свойств, которые получили поддержку почти во всех современных браузерах. Так, необходимые для создания баннеров CSS3-свойства поддерживаются следующими версиями браузеров: Chrome 12, FF 10, IE 10, iOS 3.2, Android 3.2, Opera 12. Особую трудность здесь представляет еще слабая распространенность последней 10-й версии IE и лишь частичная поддержка анимационных возможностей в Опере (пока не поддерживаются 3D трансформации).
    И так, приступим к небольшой демонстрации простого создания баннера, состоящего из двух анимированных строк текста. Реализацию данного баннера можно посмотреть на сайте http://da4niku.ru.
    Верста баннера имеет следующий вид:

    Развернуть текст

    Код HTML:
    <div id="banner_points"> <div id="banner_points_1">За каждый ежедневный визит на сайт</div> <div id="banner_points_2">Вы получаете 1 очко голосования!</div> <div id="banner_points_no">За ежедневный визит на сайт вы получаете 1 очко голосования!</div> </div>
    [свернуть]

    В общем контейнере banner_points находятся блоки строк banner_points_1 и banner_points_2, а banner_points_no показывается при отсутствии поддержки анимации со стороны браузера пользователя.
    Далее рассмотрим необходимые стили по частям:

    Развернуть текст

    Код HTML:
    #banner_points
    {
      overflow: hidden;
      position: relative;
      height: 60px;
      background-color: #f8f7b9;
      border: 1px solid #a93903;
      border-radius: 10px;
    }
    #banner_points_1, #banner_points_2, #banner_points_no
    {
      width: 200px;
      height: 60px;
      position: absolute;
      border-radius: 10px;
    }
    #banner_points_1, #banner_points_2
    {
      font-family: Arial;
      font-size: 16px;
      color: #000000;
      text-align: center;
    }
    [свернуть]

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

    Развернуть текст

    Код HTML:
    #banner_points_1
    {
      top: 60px;
      padding-top: 1px;
      z-index: 1;
      -moz-animation: banner_points_1 7s linear infinite;
      -webkit-animation: banner_points_1 7s linear infinite;
      -o-animation: banner_points_1 7s linear infinite;
      -ms-animation: banner_points_1 7s linear infinite;
      animation: banner_points_1 7s linear infinite;
    }
    #banner_points_2
    {
      top: -60px;
      padding-top: 10px;
      z-index: 2;
      -moz-animation: banner_points_2 7s linear infinite;
      -webkit-animation: banner_points_2 7s linear infinite;
      -o-animation: banner_points_2 7s linear infinite;
      -ms-animation: banner_points_2 7s linear infinite;
      animation: banner_points_2 7s linear infinite;
    }
    [свернуть]

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

    Развернуть текст

    Код HTML:
    #banner_points_no
    {
      font-family: Arial;
      font-size: 12px;
      color: #b10c0d;
      text-align: center;
      padding-top: 7px;
      -moz-animation: banner_points_no 1ms forwards;
      -webkit-animation: banner_points_no 1ms forwards;
      -o-animation: banner_points_no 1ms forwards;
      -ms-animation: banner_points_no 1ms forwards;
      animation: banner_points_no 1ms forwards;
    }
    @keyframes banner_points_no
    {
      0% {top: 0px;}
      100% {top: 60px;}
    }
    [свернуть]

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

    Развернуть текст

    Код HTML:
    @keyframes banner_points_1
    {
      0%
      {
        top: 0px;
        transform: rotateY(90deg);
        opacity: 1;
      }
      16.7%, 50%
      {
        top: 0px;
        transform: rotateY(0deg);
        opacity: 1;
      }
      66.7%, 100%
      {
        top: 0px;
        transform: rotateY(0deg);
        opacity: 0;
      }
    }
    @keyframes banner_points_2
    {
      0%, 50%
      {
        top: -60px;
        transform: rotateX(0deg);
      }
      66.7%, 90%
      {
        top: 0px;
        transform: rotateX(0deg);
      }
      100%
      {
        top: 0px;
        transform: rotateX(90deg);
      }
    }
    [свернуть]

    Первая строка сначала поворачивается вдоль оси Y, а затем плавно затухает. Вторая строка сначала ждет завершения анимации первой строки, затем выезжает сверху контейнера и далее поворачивается вдоль оси X. Так же необходимо описать все @keyframes с префиксами для всех браузеров. Хочу отметить, что после свойства с префиксом должно следовать свойство без префикса. Например, для FF код анимации будет таким:

    Развернуть текст

    Код HTML:
    @-moz-keyframes banner_points_1
    {
      0%
      {
        top: 0px;
        -moz-transform: rotateY(90deg);
        transform: rotateY(90deg);
        opacity: 1;
      }
      16.7%, 50%
      {
        top: 0px;
        -moz-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 1;
      }
      66.7%, 100%
      {
        top: 0px;
        -moz-transform: rotateY(0deg);
        transform: rotateY(0deg);
        opacity: 0;
      }
    }
    @-moz-keyframes banner_points_2
    {
      0%, 50%
      {
        top: -60px;
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
      }
      66.7%, 90%
      {
        top: 0px;
        -moz-transform: rotateX(0deg);
        transform: rotateX(0deg);
      }
      100%
      {
        top: 0px;
        -moz-transform: rotateX(90deg);
        transform: rotateX(90deg);
      }
    }
    [свернуть]

    Теперь можно будет легко создавать рекламные баннеры, не уступающие по функциональности флэш и GIF баннерам. К тому же CSS3-баннера будут намного меньше занимать места дискового пространства, а значит и быстрее загружаться в браузерах пользователей.
    Еще хотелось бы отметить тот факт, что данный вид баннеров очень сложно, а может и невозможно (хотя невозможного ничего нет) скрыть браузерными плагинами, т.к. они являются частью верстки сайта (т.е. понять, что данный DIV является баннером, определить будет сложно).
    Последний раз редактировалось archerl; 10.09.2012 в 19:50.
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 4

    Спасибо сказали:

    dev1(10.09.2012), Orcstation(20.02.2013), Veronika(15.12.2015), Zzorge(10.09.2012),
  2. Гуру Аватар для dev1
    • Регистрация: 18.01.2012
    • Сообщений: 829
    • Репутация: 273
    • Webmoney BL: ?
    archerl, пожалуйста, заверните код в спойлеры.
    • 0
  3. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    dev1, Обернул, спасибо за совет :).
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 0
  4. Продвижение без котиков Аватар для Zzorge
    • Регистрация: 25.02.2012
    • Сообщений: 1,977
    • Репутация: 1864
    archerl, Это не спойлеры, это тэг - код
    • 0
  5. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    Zzorge, Добавил спойлеры, прошу прощение :).
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 0
  6. Сайты на WordPress Аватар для ADvi
    • Регистрация: 22.01.2011
    • Сообщений: 490
    • Репутация: 89
    • Webmoney BL: ?
    archerl,Вы автор? или скопипастили _http://webcache.googleusercontent.com/search?q=cache:http://habrahabr.ru/post/151180/ ?
    Лучший хостинг в рунете | Не делайте людям добро – они вам этого не простят.
    • 0
  7. Опытный Аватар для archerl
    • Регистрация: 02.10.2011
    • Сообщений: 469
    • Записей в дневнике: 1
    • Репутация: 26
    • Webmoney BL: ?
    ADvi, Да, я автор, меня забанили почему-то за эту статью на хабре...
    http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Создание баннеров БЕСПЛАТНО!
Дизайн сайтов, графика 13 03.03.2012 20:03
Создание Gif Баннеров .
Дизайн сайтов, графика 5 25.02.2012 23:06
Создание баннеров
Дизайн сайтов, графика 3 07.11.2011 19:49
Создание сайтов подключ, разработка наружной рекламы, баннеров
Создание сайтов 0 22.04.2011 11:39
Создание баннеров. Недорого!
Дизайн сайтов, графика 2 28.10.2010 13:28

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры