Адаптивный рекламный баннер при помощи HTML5 и CSS3. HTML5 — баннеры: для чего нужны и как можно их сделать Пример создания динамического баннера на 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! 😉
Реклама — нужная вещь для любого сайта. Только стоимость инструментов для рекламы бывает выше дохода от нее. Вот тогда многие начинают мудрить, чтоб хоть немного сэкономить. Для таких «мудреных » мы и поведаем, как сделать баннер.
Что такое баннерыПод баннером в интернете подразумевается прямоугольное рекламное изображение со статическим или динамическим (анимированным ) содержимым. Баннер может включать в себя как текст, так и графический рисунок. Баннер, как правило, снабжен ссылкой, активирующейся после щелчка по нему кнопкой мыши.
Современный рост эффективности баннерной рекламы связан с использованием контекстного таргетинга. При этом на баннерах сайта рекламируют только те товары и услуги, которые «созвучны
» с тематикой ресурса:
Хорошо бы узнать, как можно сделать баннер для сайта. Но для начала нужно разобраться с существующими типами баннеров. Различают следующие их типы:
- Статические баннеры – состоят из статического изображения. Представляют собой рисунки в формате 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 .
В меню «Файл » выбираем пункт «Мастер анимации ». В появившемся окне задаем размер будущего баннера. На следующем шаге загружаем подготовленные изображения:
Затем задается скорость смены картинок в анимации. В маленьком окне эта скорость демонстрируется с помощью меняющихся цифр.
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-баннера.
Плавающий блок (или как его ещё называют двигающийся, фиксированный, прилипший) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент, в который чаще всего помещают рекламу (тизеры , баннеры или контекст ).
Увы, правила адсенса нам это запрещают. Тем не менее, многие владельцы сайтов игнорируют правила на свой страх и риск. Может быть, их за это даже не наказывают, но я бы не советовал рисковать.
Я размещаю в такие блоки РСЯ, свои тизеры/баннеры, а иногда вместо рекламы вывожу там похожие записи или какую-то полезную для посетителя информацию.
Давайте расскажу, какими способами можно сделать плавающий блок на своём сайте.
Задача: сделать последний блок в боковой колонке (сайдбаре) – плавающим. Причём, чтобы он прилипал только в тот момент, когда пользователь доходит до него скроллингом, а не сразу при открытии страницы. Также блок должен «отлипать», доходя до футера (т.е. не перекрывать его).
Самый рабочий способСуществует много вариантов реализации прилипающего блока, но не все они работают корректно. Скажу из личного опыта: один и тот же метод установки блока может сработать на одном сайте, а на другом появятся косяки.
Ниже пример плавающего блока, который сработал практически на всех сайтах, где я его устанавливал. Косяков не было. Движок тоже не важен (DLE, WordPress, LiveStreet и др.).
В желаемом месте боковой колонки вставляем такой HTML-код:
$(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)Также безотказный метод, но при помощи установки плагина . Работает без косяков.
Достоинства:
- не нужно разбираться/понимать HTML;
- простота и скорость установки.
Недостатки:
Как пользоваться:
Они мне показались менее удобными и не такими понятными, как два метода выше. Но всё же о них расскажу.
Вариант #1 (без jQuery)В сайдбар вставляем:
Прописываем стили в HTML (лучше добавить сразу в CSS):
.sticky {
position: fixed;
z-index: 101
;
}
.stop {
position: relative;
z-index: 101
;
}
Теперь на страницу добавляем сам скрипт (лучше вынести в отдельный файл, как в «Самом рабочем способе»):
(function()
{
var a =
document.querySelector("#aside1"
)
, b =
null, P =
0
; //
если ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента. Может быть отрицательным числом
window.addEventListener("scroll"
, Ascroll, false)
;
document.body.addEventListener("scroll"
, Ascroll, false)
;
function Ascroll()
{
if (b ==
null)
{
var Sa =
getComputedStyle(a, ""
)
, s =
""
;
for
(var i =
0
; i < Sa.length; i++)
{
if (Sa[
i]
.indexOf("box-sizing"
)
==
0
|| Sa[
i]
.indexOf("overflow"
)
==
0
|| Sa[
i]
.indexOf("width"
)
==
0
|| Sa[
i]
.indexOf("padding"
)
==
0
|| Sa[
i]
.indexOf("border"
)
==
0
|| Sa[
i]
.indexOf("outline"
)
==
0
|| Sa[
i]
.indexOf("box-shadow"
)
==
0
|| Sa[
i]
.indexOf("background"
)
==
0
)
{
s +=
Sa[
i]
+ ": "
+Sa.getPropertyValue(Sa[
i]
)
+ "; "
}
}
a.innerHTML =
""
+a.innerHTML+""
;
b =
a.children[
0
]
;
a.style
.height
=
b.getBoundingClientRect()
.height
+ "px"
;
a.style
.padding =
"0"
;
a.style
.border
=
"0"
;
}
var Ra =
a.getBoundingClientRect()
,
R =
Math.round(Ra.top + b.getBoundingClientRect()
.height
- document.querySelector("footer"
)
.getBoundingClientRect()
.top + 0
)
; //
селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round()
только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ((Ra.top - P)
- Династии европы Честолюбивые планы маленькой страны
- Утверждение перечней вредных и (или) опасных производственных факторов и работ, при выполнении которых проводятся обязательные предварительные и периодические медицинские осмотры (обследования) — Российская газет
- Адмирал Сенявин Дмитрий Николаевич: биография, морские сражения, награды, память Адмирал сенявин биография
- Значение рыбников павел николаевич в краткой биографической энциклопедии