Баннерная реклама. Остановка ротации при выборе слайда

Баннер–слайдер

от 2 299 руб.

Слайдер (от слова slide - скользить, англ.) тип горизонтального или вертикального баннера, при котором несколько несвязанных между собой изображений с отдельным рекламным посылом сменяют друг друга. Чаще всего слайдер применяется в «шапке» интернет-страницы, хотя нередко его размещают посередине или внизу. Благодаря применению ряда изображений, владельцы сайта охватывают несколько аудиторий.

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

Перед тем, как создать баннер-слайдер для сайта, оцените:

• размер и пропорции, которые вам необходимы;
• сколько направлений и компаний там присутствует;
• какова скорость смены слайдов и их порядок;
• где будет размещен - вверху, внизу, сбоку, внутри;
• мастерство компании BannerMakers в производстве слайдеров.

Где заказать баннер-слайдер для сайта?

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

Компания BannerMakers удерживает лидирующие позиции в производстве слайдеров для сайта. Располагаясь в Москве, мы ведем активное сотрудничество с заказчиками со всей России, выдавая безупречное качество по справедливой цене. Позвоните по указанным на сайте телефонам или напишите на почту , и мы создадим продающий баннер-слайдер в кратчайший срок.

Карусели (от англ. carousel, также «слайдер», «слайд-шоу») на сайтах очень популярны — особенно на главной странице. Но неправильно оформленная карусель может только все испортить, а не помочь. Например, быстрое мелькание баннеров раздражает и вызывает желание побыстрее покинуть сайт. Как же сделать так, чтобы вызывать интерес, а не гнев посетителей?

Рассмотрим основные моменты при проектировании слайдеров.

Принцип ОДП

Все баннеры должны быть составлены по принципу ОДП:

«O», или оффер. Конкретное предложение для вашего клиента. Какую выгоду, пользу несет ваш продукт.
«Д», или дедлайн. Ограничение вашей акции (по времени, по количеству или по цене)
«П», или призыв к действию (купить, подробнее и т.д.)

Запомните: хороший баннер содержит столько информации, сколько достаточно для клика.

Рассмотрим поподробнее 3 варианта дедлайна:

1. Ограничение по времени

Часто используемый вариант — ограничение спецпредложения. Суть в том, что вы предлагаете «вкусные» условия, . А еще лучше, если акция действует 24 часа или 3-4 дня. Чем меньше времени у посетителей на раздумья, тем выше отклик на ваше предложение.

2. Изменение цены

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

3. Ограничение по количеству

Нужно показать клиенту, что товар заканчивается. Например, «Осталось всего 17 экземпляров». Для большего эффекта укажите, что 5 из 17 уже забронированы. Все это вынуждает покупателя поторопиться с решением..

Примеры правильно созданных продающих баннеров:

2-3 баннера в слайдере

Не нужно создавать большое количество баннеров. Это бессмысленно, поскольку пользователи проводят не так много времени на главной, чтобы успеть просмотреть все ваши акции. Как правило, основное внимание будут получать первые 2-3 предложения.

Вместо слайдера . Он позволит лучше запомнить вашу акцию, не раздражая посетителей мельканием картинок.

Но если же вы хотите разместить 2-3 баннера, то следует учитывать следующие особенности.

1. Скорость

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

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

Таким образом, постарайтесь найти золотую середину. Настройте скорость ротации баннеров так, чтобы было не быстро, но и не медленно — достаточно для просмотра. 5-7 секунд обычно хватает, при условии отсутствия обилия текста.

2. Последовательность баннеров

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

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

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

С начала разработки каскадных таблиц стилей третьей версии, возможности верстальщика растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В данной работе предлагается разработка интерактивного слайдера без единой строчки какой бы то ни было реализации ECMAScript (например, JavaScript или JScript – сокращённо JS). Автоматическая ротация, интерактивный выбор любого слайда с плавным переходом – всё это реализовано на «чистом» CSS.

Введение

Свойства transition, animation и transform уже давно, в том или ином виде, реализованы во всех популярных браузерах. 6 июня 2012 года консорциум W3C объявил, что эта часть разрабатываемого стандарта CSS 3.0 кардинально меняться не будет, и рекомендовал реализовать её всем браузерам уже сегодня.

Для разработчиков всех популярных браузеров это означает, что пришла пора удалить префиксы к именам указанных свойств, поскольку сами свойства уже реализованы, причём очень близко к стандарту.

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

Устаревшие версии Internet Explorer, к которым скоро можно будет отнести даже 9 версию, не поддерживают transition, animation и transform ни в каком виде. Но их доля всё ещё значительна и превышает 10%.В данной работе для основного функционала для IE7-9 предлагается js-«заглушка», а для дополнительного функционала – эффекта плавного переключения между слайдами, согласно принципу graceful degradation – ничего.

CSS против JS

Есть множество задач, которые можно решить при помощи CSS: интерактивные галереи, многоуровневые выпадающие меню, построение и анимация трёхмерных диаграмм... Вопрос: зачем использовать CSS, когда можно все сделать на JS? Ответ каждый должен дать себе сам, принимая во внимание следующие аргументы:

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

2. Для реализации задачи не требуется знание JS и вообще любых языков программирования. Правка же CSS, как правило, доступна даже рядовому пользователю. Причём «наломать дров» в CSS значительно сложнее, нежели в JS.

БЭМ

Итак, для именования CSS классов использовалась методология Блок Элемент Модификатор (БЭМ https://github.com/bem). Суть в том, что вёрстка основана на компоновке страницы из независимых блоков. Согласно БЭМ у блока могут быть элементы, но только внутри блока. Вот CSS классы данной работы:

Image-tape /* Блок, содержащий ленту изображений */ .image-tape__radio /* Радиокнопка */ .image-tape__item /* Слайд */ .image-tape__img /* Картинка внутри слайда */ .image-tape__number-list /* Контейнер с кнопками переключения */ .image-tape__number /* Кнопка включения связанного с ней слайда */ .image-tape__number-after /* внедрён для поддержки IE7 и IE8, которые не поддерживают псевдоэлементы:after и::after соответственно */ .image-tape_count_X /* Модификатор, определяющий количество слайдов X */

Особенности использования анимации

В сети интернет есть много информации об использовании CSS анимации, поэтому мы ограничимся описанием особенностей конкретной реализации.

@keyframes image-tape__item-autoplay_count_3 { 0%{opacity:0;} 10%{opacity:1;} 33% {opacity:1;} 43% {opacity:0;} 100%{opacity:0;} }

Главная особенность реализации слайдера в том, что всем слайдам и всем кнопкам присваивается одна и та же анимация:

Image-tape_count_3 .image-tape__item, image-tape_count_3 .image-tape__number-after { -moz-animation: image-tape__item-autoplay_count_3 15s infinite; -webkit-animation: image-tape__item-autoplay_count_3 15s infinite; -o-animation: image-tape__item-autoplay_count_3 15s infinite; animation: image-tape__item-autoplay_count_3 15s infinite; }

Такой подход позволяет серьезно сократить объем кода, ведь все анимации пока ещё приходится дублировать их префиксными версиями (@-webkit-keyframes, @-moz-keyframes и @-o-keyframes), а каждую такую «стопку» правил надо отдельно описывать для каждого требуемого (заказчиком) числа слайдов. Если отдельно описывать анимацию ещё и для каждого слайда, то объем кода может составить десятки килобайт.

Чтобы этого избежать, но последовательно анимировать все слайды и кнопки при помощи одной анимации, достаточно расставить смещение начала анимации во времени для каждой пары слайд + кнопка:

Image-tape__item:nth-of-type(2), .image-tape__number:nth-of-type(2) > .image-tape__number-after { -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; } .image-tape__item:nth-of-type(3), .image-tape__number:nth-of-type(3) > .image-tape__number-after { -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; } ...

Для первой пары остаётся значение по-умолчанию – нулевое смещение.

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

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

Пауза при наведении курсора

Есть целый ряд CSS «событий», переключающих состояние html элемента. Если говорить о клике мыши, то это появление псевдоклассов:focus, :target, или:checked у одного из элементов страницы. Псевдокласс:focus может быть не более чем у одного элемента на страницу единовременно; псевдокласс:target засоряет «хистори» браузера и требует наличие тега «a»; псевдокласс:checked запоминает состояние до ухода со страницы, плюс, в случае радиокнопок, является дискретным переключателем, когда выбран может быть только один элемент конкретной группы – а это то, что нужно.

Image-tape__radio {стили не выбранной радиокнопки} .image-tape__radio:checked {стили выбранной радиокнопки}

В селекторах CSS уровня ниже 4.0 переключить состояние произвольного элемента (например, opacity слайда) можно только в связке с радиокнопкой, при помощи селекторов соседей + и ~. Переключить можно как стили соседа, так и стили потомков соседа, но в любом случае сосед должен находиться после радиокнопки.

/* Стиль первого слайда в состоянии «не выбран» */ .image-tape__radio:nth-of-type(1) ~ .image-tape__item:nth-of-type(1) { opacity: 0.0; } /* Стиль первого слайда в состоянии «выбран» */ .image-tape__radio:nth-of-type(1):checked ~ .image-tape__item:nth-of-type(1) { opacity: 1.0; }

Было использовано переключение opacity слайда – контейнера, который содержит картинку. Это более универсальный способ, чем переключение свойств картинки, поскольку в div-контейнер, в отличие от пустого элемента img, можно поместить любую дополнительную информацию (например, название слайда, или связанное описание, включая ссылки).

Для слайдов указаны свойства transition, которые позволяют сделать переключение между ними плавным.

Image-tape__item { -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }

Остановка ротации при выборе слайда

При выборе пользователем любого слайда необходимо остановить анимацию всех слайдов и кнопок. Это связано с тем, что приоритет значений свойств запущенной анимации всегда выше всех остальных значений тех же свойств (можно перебивать даже inline свойства с!important`ом).

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

...

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

Остановка анимации всех слайдов и кнопок при выборе любого слайда задаётся следующим образом:

Image-tape__radio:checked ~ .image-tape__item, .image-tape__radio:checked ~ .image-tape__number-list > .image-tape__number-after { opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; }

Произвольное число слайдов

Сделать универсальный слайдер под любое число слайдов невозможно, потому что под каждое число требуется своя «стопка» CSS-правил анимации. Каждую такую «стопку» (если она описана) можно подключать через модификатор блока image-tape:

Image-tape_count_X

Для поддержки некоторых старых браузеров первый слайд не анимируется. По этой причине контейнер первой картинки имеет opacity всегда равный 1.0. Возникает проблема: при плавном переключении двух других слайдов между собой, первый просвечивает (это может быть и background родителя блока image-tape). Для удаления эффекта просвечивания устанавливается задержка transition-delay для всех слайдов, кроме выбранного; для выбранного же устанавливается z-index больше, чем у всех остальных:

Image-tape__item { opacity: 1.0; position: relative; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; } .image-tape__radio:nth-of-type(1):checked ~ .image-tape__item:nth-of-type(1), .image-tape__radio:nth-of-type(2):checked ~ .image-tape__item:nth-of-type(2), .image-tape__radio:nth-of-type(3):checked ~ .image-tape__item:nth-of-type(3), .image-tape__radio:nth-of-type(4):checked ~ .image-tape__item:nth-of-type(4), .image-tape__radio:nth-of-type(5):checked ~ .image-tape__item:nth-of-type(5){ -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; z-index: 6; }

Чтобы слайды не конфликтовали с другими элементами сайта (например, не перекрывали выпадающее меню с z-index менее или равным 6), создаём свой контекст (stacking context) для блока путём задания минимально, необходимого для видимости, z-index`а:

Image-tape { z-index: 0; }

Теперь все элементы блока будут "конфликтовать" только между собой.

Реализация на Amiro.CMS

Весь CSS необходимо добавить во вкладку Пользовательские стили CSS при редактировании любого макета. После сброса кэша браузера этот код будет присутствовать на всех страницах сайта. Впрочем, частично, или даже полностью, CSS можно вставить непосредственно в шаблон imagetape.tpl в тег style. Это уменьшает объём подключаемого на каждую страницу сайта CSS файла, работает во всех браузерах, валидно в html5 при наличии атрибута scoped, а в условиях вёрстки независимыми блоками не влияет на другие части страницы.

При попытке вывода требуемого html кода посредством шаблона imagetape.tpl возникает две проблемы:

1. 1. В сете image, в котором заключен html код одного слайда, отсутствует счетчик (переменная, принимающая значения от 1 до количества слайдов N), который необходим для связки между собой радиокнопок и лейблов.

2. 2. Требуется группировка радиокнопок до всех слайдов, и лейблов после всех слайдов, но их количество должно однозначно соответствовать количеству слайдов.

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

##setglobalvar @imagetape_radioid = (imagetape_radioid)?imagetape_radioid + 1:1##

Здесь символ @ означает, что справа от него находится php выражение (не рекомендуется его использовать слишком часто). Весь php код, в отличие от условных конструкций if-else-endif, выполняется ещё на этапе набора html кода из сетов, поэтому счетчик будет работать.

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

##setglobalvar @imagetape_radios = imagetape_radios . " "## ##setglobalvar @imagetape_labels = imagetape_labels . " "##

В итоге, у нас получается html код, в котором сначала идёт список радиокнопок, затем список слайдов с баннерами, а затем блок с списокм лейблов:

Вывод

Уже сегодня, без навыков программирования и специализированных библиотек, до своей окончательной стандартизации, CSS 3.0 позволяет реализовывать сложный и интересный функционал. Предложенный интерактивный слайдер, на текущий момент, полностью работоспособно у 80% пользователей рунета. Для большей части оставшихся пользователей, а именно для пользователей браузеров IE7-9, можно использовать js-«заглушку», которая реализует основной функционал слайдера.

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

Режим «Баннер» - на сайте вы увидите статичное изображение (баннер). Если на одну страницу сайта добавлено несколько изображений, то при входе на сайт будет отображена только одна из них. После перезагрузки страницы – другая. Ротация происходит в случайном порядке. Каждая картинка может содержать ссылку на раздел сайта, новость либо URL стороннего сайта.

Режим «Слайдер» - позволяет устроить на сайте анимационное слайд-шоу с различными спецэффектами. Добавленные изображения будут динамически меняться с заданной скоростью, каждый кадр может быть снабжен своим текстом и ссылкой. Для включения этого режима воспользуйтесь ссылкой «Включить и настроить слайдер»

Предварительный просмотр работы слайдера доступен по кнопке «Посмотреть слайдер в шаблоне сайта»

Нажав кнопку «Добавить» , откроется форма добавления и редактирования изображений на сайт:

«Изображение» – загружайте изображения со своего компьютера(«Выбрать»), из нашей библиотеки(«Библиотека») или ищите в интернете с помощью специально предназначенного для этого инструмента («Найти в интернете»).

Также здесь задается способ обработки добавляемой картинки – изменения размера или обрезка, чтобы она корректно вписать её в заданный размер блока. Подробнее об этом можно узнать в инструкции по «Редактору картинок»

«Размещение» – местоположение баннера или слайдера (на всех страницах, только на главной или только на определенной странице вашего сайта)

«Дополнительно» – в некоторых шаблонах также имеется область для размещения контента, редактирование которого производится в данном редакторе.

Оформление :

«Тема» – здесь можно выбрать стиль внешнего оформления слайдера (скин).

Эффект :

«Эффект» – выбор эффекта анимации при смене кадров слайдера

«Параметры эффекта» - настройки и параметры для выбранного эффекта

Анимация :

«Скорость анимации» – скорость анимации при смене кадров слайдера

«Время показа кадра» – время показа каждого кадра в секундах

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

Навигация :

«Значки навигации по кадрам» - отображает иконки для выбора любого кадра слайдера.

«Вперед / назад» – выводит стрелки, позволяющие посетителям сайта перелистывать кадры вручную.

Объявление от нашего клиента: Предложение для открытия и расширения своего бизнеса. Станки для производства строительных блоков, кирпича и тротуарной плитки. Самый простой способ открыть свое дело. 89267513404 Сайт: