Как сделать прокрутку баннеров

Добавил пользователь Alex
Обновлено: 10.09.2024

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

Рекламу Adsense помещать в фиксированный блок нельзя.

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

Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.

Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.

Самый рабочий способ

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

Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).

В желаемом месте боковой колонки вставляем такой HTML-код:

div class = "sticky-block" >
div class = "inner" >
Здесь вставляем тот код, который должен двигаться.
/ div >
/ div >

Далее создаем файл fixads.js и прописываем в него:

$ ( window ) .scroll ( function ( ) <
var sb_m = 20 ; / * отступ сверху и снизу * /
var mb = 300 ; / * высота подвала с запасом * /
var st = $ ( window ) .scrollTop ( ) ;
var sb = $ ( ".sticky-block" ) ;
var sbi = $ ( ".sticky-block .inner" ) ;
var sb_ot = sb.offset ( ) .top;
var sbi_ot = sbi.offset ( ) .top;
var sb_h = sb. height ( ) ;

if ( sb_h + $ ( document ) .scrollTop ( ) + sb_m + mb ( document ) . height ( ) ) <
if ( st > sb_ot ) <
var h = Math.round ( st - sb_ot ) + sb_m;
sb.css ( < "paddingTop" : h >) ;
>
else <
sb.css ( < "paddingTop" : 0 >) ;
>
>
> ) ;

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

Теперь подкключаем JS. Для этого прописываем в секции HEAD:

Самый простой способ (для WordPress)

Также безотказный метод, но при помощи установки плагина Q2W3 Fixed Widget (Sticky Widget). Работает без косяков.

Достоинства:

не нужно разбираться/понимать HTML;
простота и скорость установки.

Недостатки:

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

Как пользоваться:

Другие способы реализации скользящих блоков

Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.

В сайдбар вставляем:

Прописываем стили в HTML (лучше добавить сразу в CSS):

style >
.sticky <
position: fixed;
z-index: 101 ;
>
.stop <
position: relative;
z-index: 101 ;
>
/ style >

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

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

Как добавить ротатор баннеров на любой сайт

Я хочу поделиться с вами универсальным скриптом ротатора баннеров, который подойдет для любого сайта или блога. /*

Скопируйте выше предложенный код, замените выделенное желтым цветом – на вашу партнёрскую ссылку, зеленым – ссылка на изображение, а фиолетовым – заполняем атрибут alt – название баннера. Не забудьте проставить размеры каждого баннера в коде скрипта (width – ширина баннера, а height – высота). Если вы хотите прокручивать больше, чем три баннера, то добавьте еще несколько раз отрезок кода. Не забудьте лишь заменить цифру в квадратных скобках на следующую по счету. Так, при добавлении четвертого баннера у вас получиться mycrib [3] далее отрезок кода, пятого - mycrib [4] далее отрезок кода и т.д.

Эти отрезки кода, отвечающие за добавление дополнительных баннеров в баннерокрутику, нужно добавлять перед кодом var x = 0; в скрипт. Этот ротатор меняет баннеры после каждого обновления страницы. Полученный код нужно вставить

Если у вас WordPress – в виджет Текст,
В Blogger (Blogspot) – в гаджет HTML/JavaScript,
на Ucoz – добавить новый блок и вставить в поле HTML.

по аналогии добавляем его в Joomla и dle.

Генератор баннерокрутилки:

Если вы не любите работать с кодами, то вы можете сгенерировать код скрипта ротатора баннера с вашими ссылками и баннерами. Для начала нужно привести все изображение баннеров к одному размеру ширины и высоты. Если у вас баннеры с различными пропорциями ширины и высоты, то можно изменять их размеры, добавляя прозрачный фон. Это можно сделать в программе Photoshop или Gimp. Теперь переходим на страницу на страницу генератора

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

Automatically refresh image – автоматическое обновление изображения,
если вы выбрали этот пункт, то укажите сколько секунд будет длиться просмотр каждого баннера (How often: secund)
New image with every page load – новое изображение после перезагрузки страницы,
Where do you want the page to open: – укажите как будет открываться ссылка – в том же окне или на новой странице (top, new или blank)
Image width и Image heigh – ширина и высота изображения соответственно.
Banner rotator number: 1. По умолчанию – 1, но у вас несколько баннерокрутилок на одной странице, то для каждого следующего ротатора используете другой номер.
url for link 1 – партнеркая ссылка 1,
url of image – соответствующая картинка (баннер)
alt text – название баннера.

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

Ротатор баннеров на wordpress

Интересным плагином для wordpress, выполняющим ротацию баннером является Simple Ads Manager. Установите и активируйте плагин. В результате в левой панели админки WordPress у вас появится раздел “Реклама”.

Выберите подрубрику “Новое место”. Добавляем название и описание. Здесь еще есть дополнительные настройки. Сохраняем изменения. Теперь жмем на вкладку “Рекламные места” –> Название вашего рекламного места –> Новое объявление Даем название объявлению, описание (не обязательно) и добавляем код объявления (это может быть изображение со ссылкой, флеш, скрипт м пр). Здесь также вы найдете множество настроек – количество показов, приоритет, на каких страницах запретить показы и прю Как вставить баннерокрутилку:
Код с id ротатора баннера:

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

Идем в админ панель ucoz. Здесь переходим по пути Инструменты –> Ротатор баннеров Создаем категорию:
Нужно лишь дать ей название. Теперь нажмите на кнопку “Добавить баннер”: Здесь даем название баннеру, выбираем категорию, в которой будут отображаться баннеры (вы только что ее создали), ссылку на изображение и партнерскую ссылку или весь код баннера, приоритет, дни недели пока баннера и некоторые другие настройки и сохраняем изменения. Таким образом мы добавляем несколько баннеров в одну категорию. Когда все баннеры будут добавлены – скопируйте код категории: Включите конструктор на главной странице сайта ucoz, добавьте новый блок, вставьте код баннерокрутилки в режиме HTML и сохраните изменения. И еще приятное для владельцев блогов - скрипт от юкоа можно добавить на блоги других платформ, и он будет прекрасно работать! Спасибо за внимание!

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

Вот то, что получится у нас в результате: Заповедники России.

Очень эффектно выглядит на большом экране

1. Разметка

Для начала создадим html-разметку для нашего красивого баннера-навигации.

Как видите, разметка очень простая. Есть общий родитель с классом .container, в него будут вложены наши плашки — блоки .section.

В каждом из блоков есть место под заголовок и описание.

Нам остается скопировать и вставить блоки еще 4 раза и внести нужные нам данные.

2. Стили

Со структурой нашей страницы разобрались. Теперь пора перейти к самому интересному. Начнем писать стили!

Для начала пропишем общие стили для страницы и нашего родительского блока с классом .container

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

Если вы еще не знакомы с единицами измерения vh и vw, то я советую вам почитать о них подробнее. Если коротко, то 1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В отличии от процентов, эти единицы измерения всегда рассчитываются от размеров окна браузера.

Исходя из этой логики наш баннер всегда будет во всю ширину и высоту браузера.

Двигаемся дальше и зададим стили для каждой из наших плашек.

В этой части кода хочу обратить ваше внимание на то, как мы записываем свойство flex-grow. Мы не пишем его отдельно, а задаем значение в рамках шортката flex. Это связано с тем, что дальше мы будем менять его по наведению курсора, а свойство flex-grow напрямую не поддается изменениям при помощи transition.

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

Теперь оформим наши текстовые блоки.

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

А теперь начнем творить магию и вносить интерактив в нашу пока неподвижную страницу.

Реагировать на наведение курсора мыши мы можем при помощи псевдокласса :hover.

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

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

Для этого в изначальные стили добавим свойство opacity со значением 0 и напишем инструкцию по поведению текста когда курсор находится над соответствующей секцией.

Теперь займемся украшением. Для начала зададим фон каждой из наших секций.

Чтобы не задавать дополнительные классы мы воспользуемся псевдоклассами :nth-child (n) и напишем правила с фоновыми картинками. В изначальные правила для плашек добавим повторяющимся свойства background-position, background-size и background-repeat.

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

Для подключения шрифта мы воспользуемся css-правилом @font-face. Я выбрала красивый и поддерживающий русский язык шрифт Roboto Condenced.

Вот мы почти и закончили! Финишная прямая.

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

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

Не забудем про transition для .section — чтобы затемнение происходило плавно.

Поздравляю! Вы только что создали свой первый интерактивный баннер. При этом мы использовали только HTML и CSS. Никакого JavaScript.

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

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

1. Что такое overflow в CSS?
2. Свойства и значения overflow
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow.

О полезном свойстве overflow

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

overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y - отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Свойства и значения overflow

visible - отображается все содержание элемента, даже за пределами установленной ширины.
hidden - отображается только область внутри элемента, остальное скрыто.
scroll - принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

Принудительная установка прокрутки в блоке CSS

Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Пример div блока с прокруткой

Код HTML и CSS

Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.

Читайте также: