StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
16.09.2015
21:33
33411
12
Бегущая строка на HTML. Основы HTML для начинающих. Урок №9
Всем привет!
Продолжаем изучать основы HTML.
В этом уроке я расскажу и научу, как сделать в HTML документе бегущую строку. Это, своего рода, примитивная анимация на веб сайте без использования графических редакторов.
Бегущую строку можно использовать для вывода новостей, акций, рекламного сообщения и даже для красивых дизайнерских моментов (например: облако в небе передвигается в шапке сайта). Я думаю, вы сами найдете применение бегучей строке на своем сайте, а моя задача сейчас рассказать, как это делается и как это выглядит на практике.
Для создания бегущей строки используют тег:
<marquee></marquee>
Пример:
<html> <head> <title>Бегущая строка</title> </head> <body> <marquee>Бегущая строка</marquee> </body> </html>
Результат:
* атрибуты для бегущей строки
○ цвет фона бегущей строки
Чтобы закрасить фон бегущей строки, добавьте к тегу «marquee» атрибут «bgcolor»:
<marquee bgcolor ="#ccc">Бегущая строка</marquee>
Результат:
○ высота и ширина бегущей строки
Чтобы установит высоту и ширину бегущей строки, добавьте к тегу «marquee» атрибут «width» и «height»:
<marquee bgcolor ="#ccc" width ="100px" height ="40px">Бегущая строка</marquee>
Результат:
○ поведение бегущей строки
Добавьте к тегу «marquee» атрибут «behavior» с такими значениями:
scroll - обычная прокрутка (по умолчанию);
slide – строка начинает свой путь из одного края и останавливается у другого;
alternate – строка будет двигаться от края до края
Пример:
<marquee behavior="scroll">обычная прокрутка (по умолчанию)</marquee> <marquee behavior="slide">Бегущая строка перейдет из одного края и остановится у другого</marquee> <marquee behavior="alternate">строка будет двигаться от края до края</marquee>
Результат:
○ направление бегущей строки
Добавьте к тегу «marquee» атрибут «direction» с такими значениями:
left – движение текста влево (по умолчанию);
right – движение текста вправо;
up – движение текста снизу вверх;
down - движение текста сверху вниз
Пример:
<marquee direction="left">движение текста влево (по умолчанию)</marquee> <marquee direction="right">движение текста вправо</marquee> <marquee direction="up" height ="50px">движение текста снизу вверх</marquee> <marquee direction="down" height ="50px">движение текста сверху вниз</marquee>
Результат:
○ скорость бегущей строки
Чтобы регулировать скорость перемещения бегущей строки, добавьте к тегу «marquee» атрибут «scrollamount»:
<marquee scrollamount="110">Бегущая строка</marquee>
Чем больше значение, тем больше скорость.
Результат:
○ задержка интервала передвижения бегущей строки
Еще один атрибут, с помощью которого можно регулировать скорость. Чем больше значение, тем меньше скорость. Добавьте к тегу «marquee» атрибут «scrolldelay»:
<marquee scrolldelay="1000" >Бегущая строка</marquee>
Результат:
○ количество проходов бегущей строки
Если вам нужно указать определенное количество проходов бегущей строки, добавьте к тегу «marquee» атрибут «loop»:
<marquee loop="2" >Бегущая строка</marquee>
В примере стоит значение «2», это значит, что проходов будет только два.
○ отступы бегущей строки
Если вам нужно указать отступ с левой и правой стороны, добавьте к тегу «marquee» атрибут «hspace»:
<marquee hspace="250" >Бегущая строка</marquee>
Результат:
Как вставить в бегущую строку изображение
Чтобы вставить бегущую строку в картинку, вставьте между тегами <marquee></marquee> уже известный вами тег для вывода картинки <img>:
<marquee direction="right"><img src="1.gif"></marquee> <marquee direction="right"><img src="2.gif"></marquee>
Результат:
Все атрибуты для тега <marquee> действуют и в этом случае.
Как вставить в бегущую строку ссылку
Здесь тоже вовсе не сложно. Как вставлять ссылку в HTML документ вы знаете. Как сделать бегущую строку вы тоже уже знаете. Достаточно вставить в текст бегущей строки ссылку и все:
<marquee>Бегущая строка на блоге <a href="http://stepkinblog.ru/">StepkinBlog.ru</a></marquee>
Пример:
<html> <head> <title>Бегущая строка</title> </head> <body> <marquee bgcolor ="#ccc" behavior="alternate" direction="right" scrollamount="5" loop="2" hspace="10">Бегущая строка на блоге<a href="http://stepkinblog.ru/"> StepkinBlog.ru</a></marquee> </body> </html>
Результат:
На сегодня это все! Жду вас на следующем уроке. Удачи!
Случайные записи:
- Как создать слайдер (карусель). Основы bootstrap 3 для начинающих. Урок №18
- Работа с файлами-3 (дополнительные функции и возможности). Основы PHP с нуля. Урок №21
- Сетка. Основы bootstrap 3 для начинающих. Урок №4
- Комментарии в php коде и как закомментировать код. Основы PHP с нуля. Урок №4
- Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
Большущее спасибо Вам за эту статью!
Ответить
5 января, 2017 at 11:47
Пожалуйста, Николай!
Ответить
Стёпка, что-то я не нашёл Ваших ответов на мои вопросы.
Рискну задать ещё:
Со вставкой картинок при организации ссылок и бегущей строки у меня не совсем получилось.
Картинка с расширением jpg расположена в той же папке, что и программка на HTML. В случае с бегущей картинкой, картинка бежит, только это какой-то намек на картинку: маленький квадратик, обозначающий картинку .
И чем дело? Что не так?
Ответить
17 февраля, 2017 at 21:10
1. Возможно, что Вы не верно указан путь до картинки.
2. Возможно, что Вы назвали картинку русскими буквами.
3. Возможно, что Вы не верно прописали название картинки в коде.
Ответить
great blog!
Ответить
12 марта, 2017 at 18:00
thanks a lot
Ответить
Ответить
29 мая, 2017 at 23:22
смайлики, это те же картинки. В этом уроке я показал, как вставить в бегущую строку картинку
Ответить
А как сделать бегущую картинку, но чтоб кликнув на неё она вела на любой url?
Ответить
12 ноября, 2021 at 14:38
внимательно почитайте статью. Там все есть. Есть как вставить картинку, и есть как вставить ссылку.
Ответить
Можно ли сделать бегущие строки фоном .что бы они не перекрывали контент?
Ответить
12 ноября, 2021 at 14:30
можно. Пробуйте через CSS
Ответить