Herunterladen "Уроки 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/unsupportedbrowser Инстаграм Wiseplat: https://www.facebook.com/unsupportedbrowser Instagram: https://www.facebook.com/unsupportedbrowser Twitter - https://twitter.com/WiseplatSchool ******************************** Если Вам понравилась публикация, подписывайтесь на канал! Ставьте лайки, тогда будем еще писать такой контент :) Если есть вопросы или пожелания, то пишите, в комментариях. ******************************** - Уроки от #OlegShpagin 👨🏼‍💻