Напевно, ви вже здогадалися, про що йде мова. Плаваючі блоки розміщуються на сторінці, і, як правило, продовжують візуально залишатися на своєму місці при прокручуванні сторінки. Використання плаваючих блоків стало трендом для різних рекламних оголошень, так чи інакше, для більшого залучення уваги відвідувачів. Можливість використання даної системи не обмежується використанням його для реклами, т. к. бувають і реалізації дизайну з плаваючими елементами на сторінці. Загалом, воля фантазіям, а ми перейдемо до прикладу реалізації.
Приклад реалізований з допомогою використання JQuery, а це означає, що вам слід попередньо підключити його в заголовку сторінки. Далі в тілі документа розміщується сам блок:
Потім прописуємо код, який зробить ефект для блоку:
$(window).load(function() {
var block = $(‘#fly_block’); // ID блоку
var position = block.position();
var windowpos = 0;
$(window).scroll(function() {
wintop = $(window).scrollTop();
if(wintop
Ось приклад плаваючого блоку, успіхів!
Додав: htmaker, 22.08.2015 р.
(Ще не оцінили)
Завантаження…
Діліться з друзями:
См. також:
Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO
Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript
Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека
Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript
Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript
Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript
Список вибору на JQuery
Рубрика: Html, CSS, Javascript
Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript
Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript
