Бегущая строка на web-странице (продолжение)

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

Смотрим результат:

Небольшое резюме: в этом варианте мы сделали изменяемые размеры поля строки, добавили фоновый цвет, строка может двигаться в любом из четырёх направлений и с разной скоростью.

При желании, можно использовать и несколько дополнительных атрибутов:

1. behavior="..." – задает тип движения.
   Возможные варианты:
   alternate – перемещение между левой и правой (верхней и нижней) границами и обратно;
   slide – текст появляется с одного края и останавливается у другого;
   scroll - циклическая прокрутка текста из одного конца в другой.
2. scrolldelay="..." - этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах (100, 200, 300).
3. loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
4. hspace - величина, на которую отступают от строки объекты справа и слева.
5. vspace - величина отступа по вертикали.

Бегущая строка с расширенным набором параметров

Примечания:

1. Если Вы видите пустое поле без СТРОКИ, значит 5 запланированных показов (loop="5") пройдено и нужно

2. Если планируете вставку картинки в фоновое поле, лучше будет выглядеть картинка с бесцветным фоном. Поэтому нужно предварительно найти такую картинку, либо убрать фон в программе Фотошоп. Материал по этой теме смотрите ЗДЕСЬ.

3. У бегущей строки есть небольшие проблемы с кроссбраузерностью. Тег marquee корректно читается браузером Internet Explorer, а в других браузерах Вы можете увидеть несколько другое, чем ожидали, либо не увидеть ничего. Такие вот суровые будни! А кому сейчас легко, санкции, напряженная обстановка в мире и т.д.

Если Вы используете на сайте файл стилей style.css, некоторые параметры можно задать в нём, например:

Пояснения:

          width: 90%; - как известно, это ширина строки. В файле style.css её следует указывать лишь в варианте, когда Вы планируете размещение нескольких бегущих строк одинаковой ширины, а именно 90% в нашем случае. Конечно, практичнее её указывать в свойствах тега marquee непосредственно на html-странице, определяя каждой строке своё значение width.

          height:115px; - высота поля строки. Аналогично предыдущему пояснению.

          margin:0 auto; - выравнивание поля строки по центру страницы. Именно это значение уместно в файле style.css, так как align="center" и align="middle" в marquee корректируют только скроллируемый текст, а поле приходится центровать тегом center.

          text-align:left; - так же уместное значение. Выравнивание текста в строке, left - по левому краю, right - по правому краю, justify - по ширине страницы.

          background-color: #eaf1f9; - фоновый цвет. Уместен здесь только в случае, если все поля строк Вы хотите сделать одинаковым цветом.

На этом всё. Надеюсь, что урок был понятный, вроде бы всё «разложил по полочкам». Заходите ещё на мой сайт, оставляйте комментарии. Здесь много полезного материала, особенно для начинающих. Всегда с Вами, L.M.