Уроки 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=““ width=“150px“ alt=““][/marquee] [marquee behavior=“alternate“ direction=“right“][div style=“background-color: red;width: 150px;height: 150px;“][/div][/marquee] [/body] [/html] *** Не забываем, что Ютуб не дает писать угловые скобки – поэтому здесь они заменены на квадратные!!! – для использования кода - сделайте наоборот 😊 Дополнительное описание, домашние задания и многое другое можно найти на сайте WISEPLAT: 1) Урок на сайте Wiseplat: ✔ Сообщество программистов: ✔ ------------- Вступай в группу Вк - 🚀 Группа FaceBook - Инстаграм Wiseplat: Instagram: Twitter - ******************************** Если Вам понравилась публикация, подписывайтесь на канал! Ставьте лайки, тогда будем еще писать такой контент :) Если есть вопросы или пожелания, то пишите, в комментариях. ******************************** - Уроки от #OlegShpagin 👨🏼‍💻 #урокиhtml #урокиcss #бегущаястрока