Слайдер тегом marquee средствами html и css

html slider marquee - Слайдер тегом marquee средствами html и css

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

Документация на htmlbook

Если текст пустить в любую из 4- сторон, то он добегает до конца и бежит заново! Но в таком случаее будет пробел из текста по величине блока после окончания пробега и при каждом обновлении страницы. Этого можно избежать пустив текст в один бок и возвращая его в противоположную сторону.

<marquee direction="down" behavior="alternate" width="200px" height="350px" scrollamount="2" onmouseout="this.start()" onmouseover="this.stop()">Тут любой текст, картинка, прочее! </marquee>
onmouseout="this.start()" onmouseover="this.stop()" нужны для остановки прбега при наведении курсора мышки

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

Похожие записи

Mobile-friendly — немного об адаптивной верстке
В эпоху mobile-friendly сайтов адаптивная верстка для сайта стала обыденностью и по умолчанию включается в базовый ценник (или же делают...
JS — делаем плавающий блок для рекламы
Заходим на сайт, скролим вниз, пока не закончатся все блоки в сайдбаре, но вот незадача — один из блоков прилип...
jQuery — изменяем вложенный блок (чилд) при наведении на родительский
На июнь 2017 года средствами CSS невозможно изменить вложенный блок (если он не является прямым наследником родительского), при наведении на...
JS — создаем эффект мигания. Мигающие баннеры в HTML
В данной статье научимся создавать эффект мигания на javascript и jQuery (исчезание и появление) и задавать ему временной интервал. Для...
JS — автоматизация сокрытия всех внешних ссылок на странице
Задача: автоматически находить все ссылки на сайте при этом исключая внутренние и те, у которых имеется метка. Ко всем остальным добавлять...

Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *