Уроки HTML, CSS / Как сделать бегущую строку

Привет друзья! Сегодня мы с вами рассмотрим, как в 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: https://wiseplat.org/

1) Урок на сайте Wiseplat:
✔ Сообщество программистов: https://wiseplat.org/
✔ -------------

Вступай в группу Вк - https://vk.com/wiseplat 🚀
Группа FaceBook - https://www.facebook.com/wiseplat/
Инстаграм Wiseplat: https://www.instagram.com/wiseplat/
Instagram: https://www.instagram.com/shpaginoleg/
Twitter - https://twitter.com/WiseplatSchool

********************************
Если Вам понравилась публикация, подписывайтесь на канал!

Ставьте лайки, тогда будем еще писать такой контент :)

Если есть вопросы или пожелания, то пишите, в комментариях.
********************************

- Уроки от #OlegShpagin 👨🏼‍💻
#урокиhtml #урокиcss #бегущаястрока

Видео Уроки HTML, CSS / Как сделать бегущую строку канала Изучаем мир ИТ / Олег Шпагин / WISEPLAT