Привет друзья! Сегодня мы с вами рассмотрим, как в html сделать бегущую строку. Причем бегущая строка может быть не только текстом, но также туда можно вставить, например, картинку, и такая картинка тоже будет у вас передвигаться по экрану - содержимое контейнера позволяет перемещать и скролировать любые элементы веб-страницы - изображения, текст, таблицы, элементы форм и т.д. Тег, который используется для создания бегущей строки в html называется marquee. Перемещение можно задать по горизонтали или по вертикали, в этом случае указываются размеры области, в которой будет происходить движение. 😊
Синтаксис
[marquee]...[/marquee]
Атрибуты
Behavior - задает тип движения содержимого контейнера.
Bgcolor - Цвет фона.
Direction - задает направление движения содержимого контейнера.
Height- Высота области прокрутки.
Hspace - Горизонтальные поля вокруг контента.
Loop - Задает сколько раз будет прокручиваться содержимое.
Scrollamount - Скорость движения контента.
Scrolldelay - Величина задержки в миллисекундах между движениями.
Truespeed - Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
Vspace - Вертикальные поля вокруг содержимого.
Width - Ширина области прокрутки.
Главное, не переборщите со скроллингом, потому что такие навязывающийся на глаза элементы довольно сильно отвлекают внимание пользователя, и посетитель может уйти с вашего сайта! 😊
Пример из видео:
[!DOCTYPE html]
[html lang="en"]
[head]
[meta charset="UTF-8"]
[title]бегущая строка[/title]
[/head]
[body]
[h1]Бегущая строка[/h1]
[p]наш контент наш контент наш контент [/p]
[marquee behavior="alternate" direction="left"]Текст 1 alternate[/marquee]
[marquee behavior="scroll" direction="left"]Текст 2 scroll[/marquee]
[marquee behavior="alternate" direction="left"][img src="finding-clipart-11.png" width="150px" alt=""][/marquee]
[marquee behavior="alternate" direction="right"][div style="background-color: red;width: 150px;height: 150px;"][/div][/marquee]
[/body]
[/html]
*** Не забываем, что Ютуб не дает писать угловые скобки - поэтому здесь они заменены на квадратные!!! - для использования кода - сделайте наоборот 😊
Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: wiseplat.org/
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - wiseplat 🚀
Группа FaceBook - / wiseplat
Инстаграм Wiseplat: / wiseplat
Instagram: / shpaginoleg
Twitter - / wiseplatschool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼💻
#урокиhtml #урокиcss #бегущаястрока
22 дек 2019
