Уроки 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: wiseplat.org/
1) Урок на сайте Wiseplat:
✔ Сообщество программистов: wiseplat.org/
✔ -------------
Вступай в группу Вк - wiseplat 🚀
Группа FaceBook - / wiseplat
Инстаграм Wiseplat: / wiseplat
Instagram: / shpaginoleg
Twitter - / wiseplatschool
********************************
Если Вам понравилась публикация, подписывайтесь на канал!
Ставьте лайки, тогда будем еще писать такой контент :)
Если есть вопросы или пожелания, то пишите, в комментариях.
********************************
- Уроки от #OlegShpagin 👨🏼‍💻
#урокиhtml #урокиcss #бегущаястрока

[@wiseplat]

Ценю твой ЛАЙК и КОММЕНТ!
Facebook: facebook.com/wiseplat/
Личный Facebook: facebook.com/oleg.shpagin
ВКонтакте: vk.com/wiseplat
Личный ВКонтакте: vk.com/bazatut_ru
Instagram: instagram.com/wiseplat/
Мой личный Instagram: instagram.com/shpaginoleg/

[@lumeaceaiuluisrl6343]

Полезно! Спасибо!

[@arailymsatybaldiyeva4714]

Спасибо большое за видео!

[@umidnazarov]

Спасибо за обзор

[@user-sh1vz1wu8i]

Прикольно

[@user-nc2uz2hk9d]

класс

[@wiseplat]

Спасибо! :)

[@fluffylump881]

как сделать чтобы строчка зацикливалась? тоесть там где конец сразу начинало бежать начало текста. тоесть беспрерывно?

[@bestshop2129]

Здравствуйте Олег! Смотрю ваши уроки по созданию сайтов все внятно и просто, но есть вопрос, у меня не получается сделать динамическую строку написал код, но ни как не работает, я новичок, может где ошибка все испробовал. Дайте подсказку. Может код , переслать? Нужна помощь.

[@user-kj7nz2mh3q]

Покажи как в CSS сделать анимацию блока текста.Чтоб блок не ломался.Не давая ему фиксированных значений.

[@alexanderpadalka5708]

✈

[@user-ux1qc9he8z]

Здравствуйте мы можете ответить html без интернета работает или нет?

[@user-yq1oj6yt2t]

Что лучше? Использовать этот тег или делать строку с помощью css? Какой подход лучше?

[@wiseplat]

:) Привет! Я вообще использую для этого JS :) Чтобы гарантированно работало :)

[@statstopfinish]

@@wiseplat Какие могут быть проблемы с бегущей строкой , если я использовал HTML? А то я уже сделал, вроде работает но хотелось бы знать какие грабли могут ждать.Я так понял что это может не гарантировать нормальной работы .

[@user-ex2wd8kv1h]

я не эксперт, но джС более подходящий язык для анимаций и движения чем хтмл
@@statstopfinish

[@droydrex8375]

табуляция это кнопка Tab на клаве ?

[@wamser_1782]

enter

[@militisorphic]

табуляция -tab

[@user-ju7bb4bb9e]

а как сделать фон для этой "бегущей строки"?

[@JK_Milk_o]

Скорее всего также как и для обычного текста

[@alex_yav]

к диву примени бэкграунд колор в css

[@romanmed9035]

этот тэг уже давно устарел и будет удален.

[@newyoutube9614]

alternate умер?

[@newyoutube9614]

запомните, что в таблице не работает!😒

[@passingangbir6791]

Мужик, этот тег уже давно сдох.

[@JK_Milk_o]

Реал ?

[@passingangbir6791]

@@JK_Milk_o , да. Дык не работает.

[@cbjygk9857]

@@passingangbir6791 так и видео уже два года)

[@passingangbir6791]

@@cbjygk9857 , освежить нельзя?

[@cbjygk9857]

@@passingangbir6791 ну не все же живут тем, что выставляют курсы, а потом их «освежают» ))) чувак ты как с луны прилетел

[@user-hf3td4ys9u]

Изначально не поняла, что нажать? Какая турбуляция, я не информатик, можно русскими словами пожалуйста)😂

[@philippetroff4296]

на Tab

[@user-rv3ih4ln7f]

жопа

[@user-rv3ih4ln7f]

херня

[@user-rv3ih4ln7f]

полный отстой