Как сделать на сайте бегущую строку
- Размещение бегущей строки на сайте
- Простой способ вставки бегущей строки
- Создание бегущей строки с собственной информацией
- Пример кода бегущей строки
- Например, в самом простом варианте код может выглядеть так:
Размещение бегущей строки на сайте
Уже давно многие посетители интернета не чувствуют себя случайными гостями в виртуальной реальности. Тем более что обзавестись в глобальной сети своим собственным местом для работы, отдыха или общения теперь проще простого. А после того как такое место - сайт или страница - появляется, хочется сделать его красивее, информативнее, удобнее. Один из способов получить нужный результат - разместить часть информации или картинок в бегущей строке на сайте.
Простой способ вставки бегущей строки
Самый простой способ вставки бегущей строки в страницу сайта - воспользоваться готовым к использованию HTML-кодом, которой бесплатно предоставляют многие интернет-ресурсы. Этот вариант будет оптимальным, например, если вам требуется поместить на страницы своего сайта новостную ленту, биржевые котировки, информацию игрового портала и т.д. В этом случае нужно найти на страницах выбранного интернет-ресурса готовый код, скопировать и вставить в нужное место HTML-кода страницы своего сайта. Такой вариант удобен не только тем, что от вас не потребуется знания скриптов, которые создают бегущую строку, но также не придется беспокоиться о наполнении информацией такой ленты - это будет делать автоматически тот сайт, откуда взят код бегущей строки.
Создание бегущей строки с собственной информацией
Если же наполнять бегущую строку вам необходимо собственной информацией или картинками, придется самостоятельно составить ее код. Проще всего это сделать с использованием специального тега языка HTML - marquee. Он состоит из открывающей и закрывающей частей, в первой из которой указывается дополнительная информация - атрибуты. Это служебные данные, которые сообщают браузеру посетителя каким шрифтом и цветом надо отображать текст бегущей строки, в которую сторону должно быть направлено движение, ширину, высоту и фон окна этой строки и т.д. А между открывающим и закрывающим тегами и помещается сам текст новостной ленты.
Пример кода бегущей строки
Например, в самом простом варианте код может выглядеть так:
<marquee width="300" height="100">это текст бегущей строки</marquee>
Здесь указаны лишь ширина и высота блока в пикселах (атрибуты width и height) и прокручиваемый текст. Направление перемещения задается атрибутом direction, которому можно присвоить одно из четырех значений на английском языке (right, left, up, down). По умолчанию текст бегущей строки закольцован - к его окончанию прикреплено его же начало, которое будет перемещаться в том же самом направлении. Если использовать атрибут behavior со значением alternate, то текст, дойдя до правой границы окна, изменит направление на противоположное и будет бесконечно отскакивать от двух противоположных сторон (левой и правой или верхней и нижней). Еще один важный атрибут бегущей строки - scrollAmount. Он задает скорость перемещения текста в относительных единицах - 1 означает самое медленное перемещение, 2 - немного быстрее и т.д. С помощью атрибутов можно задавать задержку перед началом прокрутки бегущей строки, количество циклов и паузу между ними, отступы от текста до границы окошка этого элемента.
