HTML с нуля: Бегущая строка в HTML. Урок №9 Overcod.net

HTML с нуля: Бегущая строка в HTML. Урок №9

Привет всем! Продолжаем изучать основы HTML. В этом уроке я расскажу, как создать бегущую строку в HTML-документе. Это своего рода базовая анимация на веб-сайте без использования графических редакторов.

Бегущую строку можно применять для отображения новостей, акций, рекламных сообщений и даже декоративных элементов дизайна (например, движение облаков в шапке сайта). Вы сами найдете применение этому эффекту, а моя задача — показать, как его реализовать на практике.

Тег для создания бегущей строки

Для создания бегущей строки используется тег:

<marquee></marquee>

Пример кода:

<html>
<head>
    <title>Бегущая строка</title>
</head>
<body>
    <marquee>Это бегущая строка</marquee>
</body>
</html>

Настройка атрибутов

Цвет фона

Чтобы изменить фон строки, добавьте атрибут bgcolor:

<marquee bgcolor="#ccc">Бегущая строка</marquee>

Высота и ширина

Для задания размеров используйте атрибуты width и height:

<marquee bgcolor="#ccc" width="200px" height="40px">Бегущая строка</marquee>

Тип движения

Атрибут behavior определяет способ движения строки:

scroll — обычная прокрутка (по умолчанию);
slide — строка останавливается на другом крае;
alternate — движение от края до края.

Пример:

<marquee behavior="scroll">Обычная прокрутка</marquee>
<marquee behavior="slide">Бегущая строка останавливается на другом крае</marquee>
<marquee behavior="alternate">Движение от края до края</marquee>

Направление движения

Атрибут direction задает направление:

left — влево (по умолчанию);
right — вправо;
up — вверх;
down — вниз.

Пример:

<marquee direction="right">Движение вправо</marquee>
<marquee direction="up" height="50px">Движение вверх</marquee>
<marquee direction="down" height="50px">Движение вниз</marquee>

Скорость движения

Атрибут scrollamount определяет скорость:

<marquee scrollamount="10">Быстрое движение</marquee>

Чем больше значение, тем быстрее движение.

Задержка между шагами

Атрибут scrolldelay задает паузу между перемещениями. Чем больше значение, тем медленнее движение:

<marquee scrolldelay="500">Медленное движени</marquee>

Количество повторений

Атрибут loop задает количество циклов анимации:

<marquee loop="3">Строка повторится трижды</marquee>

Отступы

Атрибут hspace добавляет горизонтальные отступы:

<marquee hspace="50">Бегущая строка с отступами</marquee>

Добавление изображения

Вставить картинку можно с помощью тега <img>:

<marquee direction="right"><img src="image.gif"></marquee>

Добавление ссылки

Ссылку можно добавить внутрь бегущей строки:

<marquee>Посетите наш сайт <a href="https://www.overcod.net/">Overcod.net</a></marquee>

Полный пример с ссылкой:

<html>
<head>
    <title>Бегущая строка</title>
</head>
<body>
    <marquee bgcolor="#ccc" behavior="alternate" direction="right" scrollamount="5" loop="2" hspace="10">
        Бегущая строка на блоге <a href="https://www.overcod.net/">Overcod.net</a>
    </marquee>
</body>
</html>

На этом все! Жду вас на следующем уроке. Желаю успехов!