Как сделать на сайте бегущую строку?

2 ноября 2014 г. Просмотров: 1162 Инструкции

Уже давно многие посетители интернета не чувствуют себя случайными гостями в виртуальной реальности. Тем более что обзавестись в глобальной сети своим собственным местом для работы, отдыха или общения теперь проще простого. А после того как такое место - сайт или страница - появляется, хочется сделать его красивее, информативнее, удобнее. Один из способов получить нужный результат - разместить часть информации или картинок в бегущей строке на сайте.


Создать сайт самостоятельно с Wix.com


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

Оцените статью!