Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  среда, апреля 27, 2011  

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

Для этого в html существует эффект плывущего текста, который осуществляется с помощью определенных тегов: открывающегося тега <marquee> и закрывающегося его </marquee>. Текст, заключенный между ними и обретает силу движения. Бегущая строка хороша для транслирования новостей блога либо просто для обращения внимания читателей к определенному месту страницы.


Пример простой бегущий строки будет выглядеть так:
<marquee">Очень грустный паровоз</marquee>
А вот так будет выглядеть ее визуальный пример:
Очень грустный паровоз
Если вы добавите эту строку себе в блог, то увидите ее в действии. Но согласитесь, выглядит она совсем несчастно и по-плебейски. Дабы внести разнообразие в жизнь нашего опытного образца, существует множество html-определений. Привожу их в следующей таблице:

Тег Значение
direction="left" Движение текста влево
direction="right" Движение текста вправо
direction="up" Движение текста вверх
direction="down" Движение текста вниз
behavior="alternate" Движение текста вправо до конца блока, после чего текст движется влево
behavior="slide" Текст останавливается как только достигает конца блока, в который заключен
loop="4" Указывает на количество появлений бегущего текста, в кавычках обозначается число появлений
scrollamount="3" Скорость движения текста, чем выше параметр, тем быстрее движется текст
width="300" Ширина блока, в котором движется текст
height="40" Высота блока, в котором движется текст
onmouseover="this.stop()" onmouseout="this.start()" В первом случае текст останавливается, если к нему подведен курсор, во втором – начинает двигаться
bgcolor="#FFFFFF" Цвет блока, в котором движется текст
style="color: #000000" Цвет текста
style="font-size: 2em" Размер текста
style="font-family: Ariel" Шрифт текста
style="font-size: 14pt; color:
#000000; font-family: Ariel"
Пример обозначения общего стиля плывущего текста
И наконец общий пример, который вы можете отрегулировать на свой вкус:
<marquee direction="down" scrollamount="3" width="255" style="font-size: 14pt; color: #A13D0C; font-family: Tahoma" height="60" bgcolor="#EDB55E">Бегущая строка для Blogger</marquee>
Бегущая строка для Blogger
Зная эти параметры, можно поэкспериментировать с этими тегами для создания каких-нибудь новостных или рекламных блоков в блоге. Можно транслировать, например, новость на интересную статью в блоге. Примеры уже готовых виджетов бегущих строк вы можете увидеть  в этой статье.

Как видите, имея достаточно фантазии, можно найти применение строкам, бегущим вдаль. Непосредственно в Blogger плывущий текст интегрируется на странице создания сообщения, во вкладке “Изменить HTML”, либо с помощью обыкновенного гаджета HTML/JavaScript.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.