Скорость Marquee
Статьи о Marquee
Атрибуты и параметры скорости в тэге бегущей строки
Июль 2009 г.
Смещение контента-ScrollAmount
Эффект Бегущая строка есть последовательная отрисовка и удаление контента, со смещением определённым количеством пикселей, и через заданный период времени в миллисекундах. По умолчанию смещение отрисовки контента в тэге <marquee> равно 6 пикселей, атрибутом смещения является scrollamount (монтирование прокрутки: англ.), в некоторых веб-браузерах при отсутствии этого атрибута, параметр смещения может быть от 2 до 6 пикселей, проверить это можно просматривая документ, с бегущей строкой с кодом <marquee></marquee> разными версиями и типами браузеров, зрительно это воспринимается как разница в скорости.
Если скорость монтирования важна в различных версиях браузерах, атрибут scrollamount, выставляется обязательно. Параметр «0» в scrollamount, запрещает скроллинг контента, значение «1», есть минимальное расстояние между отрисовками:<marquee scrollamount=»1″>Бегущая строка</marquee>
Бегущая строкаВ большинстве программ автоматической генерации HTML-кода, этот атрибут, чаще всего задаётся в 2 пикселя.
Мы для примера просмотрим вариант со смещением в 10 пикселей scrollamount=»10″.
Задержка смещения-ScrollDelay
Скорость движения строк в приведённых примерах, воспринимается, разной, однако период времени монтирования во всех трёх примерах одинаков. В различных версиях по умолчанию скорость монтирования определяется операционной системой в которой установлен браузер. Для Windows она равна 85 миллисекундам. Пока Internet Explorer оставался единственным веб клиентом воспроизводившим бегущую строку в тэге marquee, речь шла о разности скорости в IE (Windows) и IE (Macintosh), сейчас когда самые последние версии популярных браузеров (Opera, Mozilla, Konqueror) тоже стали воспроизводить тэг бегущей строки, а они портируются не только в Windows, но и в Юниксы и юниксоподобные операционные системы, разница в скорости достаточно заметна. Поэтому установка параметров скроллинга актуальна, при построении сюжетов в которых скорость движения контента имеет значение.
Период времени между отрисовками задаётся атрибутом scrolldelay (задержка монтирования: англ.) в миллисекундах (1 msek=0,001 sek), по умолчанию задан параметр 0, т.е. задержка определяется операционной системой. Для управления задержкой задаётся любое целое число больше значения установленного в ОС. Для наглядности установим задержку в две секунды, и расстояние между отрисовками в 100 пикселей.<marquee scrollamount="100" scrolldelay="2000">Бегущая строка</marquee>
Снятие ограничения задержки смещения-TrueSpeed
Для снятия дефолтной задержки операционной системы, используется атрибут truespeed (верная скорость: англ.). В html разметке этот атрибут записывается так: <marquee scrolldelay=»» truespeed>, в xhtml соответственно <marquee scrolldelay=»» truespeed=»truespeed»>. Установим задержку отрисовки 20 миллисекунды, для данной страницы:
<marquee scrolldelay=»20″ truespeed=»truespeed»>Бегущая строка</marquee>
Несмотря на то, что ограничение установлено операционной системой снято, в различных типах браузеров, скорость будет различна. Для сравнения ещё раз сделаем строку из первого примера. При желании и наличии нескольких клиентов в одной ОС, можно просмотреть эту страницу и убедиться в разнице воспроизведения (просто сверяя количество прокруток в обоих примерах, в IE строка с truespeed успевает прокрутится четыре раза, Opera или Mozilla два, в этих браузерах, скорость монтирования будет не менее 60 миллисекунд).
Бегущая строкаМинимальным значением естественно возможна задержка в 1 msek, scrolldelay=»1″, рассмотрим этот пример.
Бегущая строкаВ Internet Explorer контент будет мелькать, а в Opera, Firefox скорость как сказано выше установится 60 мсек и это разумно, при скорости ниже 50-60, контент не воспринимается из-за эффекта мелькания (просмотр в IE, убедительно доказывает это) . Но если посмотреть строку со смещением в 1 пиксель (Пример 2), то хочется назвать её, не бегущей, а ползущей строкой, но визуально она приятна для глаз. Вот, что-бы получить бегущую, а не ползущую строку с плавной отрисовкой, установим
<marquee scrolldelay=»10″ scrollamount=»1″ truespeed>Бегущая строка</marquee>
Такая строка более приемлема для просмотра.
Статичные варианты бегущей строки.
С помощью изменения параметров атрибутов монтирования и задержки монтирования контента в бегущей строке, она изменяется, то прыгающая, то ползущая, то летящая, добавим к этому перечню ещё несколько вариантов.
Установим в таблицу тэг marquee с такими параметрами, чтобы смещение (шаг) монтирования и длина пробега оказались в одном порядке по количеству пикселей:<table border="1" align="center"><tr><td><marquee scrollamount="130" scrolldelay="0">Бегущая строка</marquee></td></tr></table>
| Бегущая строка |
Получается не бегущая строка, а мигающий контент или как это принято называть от английского (blink) блинкующий. В Mozill’ах такой эффект задаётся через CSS, в IE он не выполняется. Но в отличии от blink в scrolldelay есть возможность изменять параметр. Установим в него задержку в 5 сек: scrolldelay=»5000″.
| Бегущая строка |
Это уже не банальное мигание, а периодический показ контента 🙂
Попробуем увеличить объём контента
| статичная бегущая строчка |
Но для этого примера необходимо ставить много пробелов между словами, так как ширина букв различна, подогнать достаточно трудно, что бы слова выводились точно по центру: статичная бегущая строчка
Гораздо проще дело обстоит с картинками, ширину картинок сделаем равную 150 пикселей, возьмем, четыре урбанистических пейзажей. Тэг прокручивания поместим в табличную ячейку. Почему в табличную ячейку, да можно всё, тоже самое сделать и в DIV, и это будет более правильно, но не любят Опера и Мозилы, когда marquee помещена в леер, они начинают плевать на указанные размеры такого леера растягивают его, не выполняют параметры тэга, а в таблице терпят и всё выполняют.
<table border="0" align="center"><tr><td><marquee scrollamount="150" scrolldelay="4500"><img src="/img/show1.gif" /><img src="/img/show2.gif" /><img src="/img/show3.gif" /><img src="/img/show4.gif" /></marquee></td></tr> </table> Для уменьшения кода, мы опустили альтернативный текст и размеры картинок, на работоспособность это не влияет, но устанавливать их желательно, особенно альтернативный текст.
Явно раздражает пустышка, что бы зрительно создать эффект слайд-шоу вставим в бэкграунд (background) таблицы картинку с изображением средневекового замка (в противоположность суперсовременным городам).
<table background="/img/show5.gif" border="0" align="center">(Прим: если при просмотре Internet Explorer’ом 8-й или 9-й версии, пример не работает, попробуйте включить режим совместимости с 7-й версией, в панели браузера, значок разорванного файла)Получится вполне приемлемое слайд шоу.
Там где слайд-шоу, там напрашивается мультипликация, на самую скорою руку нарисуем в Paint три простеньких смайла (наверно мы все начинали освоение графики на компьютере, именно таким образом).
Теперь вставим это в табличку и тэг бегущей строки с таким параметром: scrollamount="63" scrolldelay="1000"
Конечно методом обычной Gif-анимации (не говоря уже о Flash или SVG) создаётся мультипликация гораздо лучшего качества, тем более в них можно устанавливать любую задержку для каждого кадра, в marquee мы можем позволить удвоить (утроить и так далее) время показа картинки установив две картинки (или более) подряд. Установим второй смайлик (с прямым взглядом) дважды.
Несмотря на неудобство с установкой задержки кадров (кстати в некоторых сюжетах если необходимо усложнённый показ можно вставить анимированный кадр) и в мультипликации с помощью marquee тоже есть некоторые преимущества, дело в том, что скроллируется любой тип картинок, правильнее сказать файла любого графического формата воспроизводимого в браузерах, для примера создадим леер (div в стиле помещённом в голову страницы укажем размеры соответствующие размеры совпадающие с картинками 74х55рх, и в бэкграунде установим цвет зелёный, хотя естественно можно было бы, установить в него картинку: #show {width:74;height:55;background:#3f0}, вставим тэг скроллинга:
<marquee scrollamount="74" scrolldelay="3000">Смещение равно ширине картинки 74 пикселя, задержка три секунды (3000 мсек) и на всякий случай скрипты останова скроллирования наведением курсора. А контентом послужат пять картинок самых популярных на веб-страницах графических форматов BMP, PNG, JPG, GIF и GIF-анимация, опытные дизайнеры на глаз определяют (анимированный естественно определяет любой), где какой формат, но мы их подпишем и при желании их свойства можно посмотреть (для более удобного просмотра и установлены скрипты останова, хотя понятно, что они не всегда исполняются)
Всё это в IExplorer должно воспроизводиться, как слайд шоу, а вот в Опере и Мозилах, вероятнее всего получиться обычный скроллинг, даже если бы мы сделали подобный стиль только для Marquee, т.е. без таблицы или леера. Поэтому лучше размещать такую конструкцию в таблице, это не современно, но зато наверняка.
В Marquee скроллируется любой веб-контент не имеющий абсолютной позиции относительно окна браузера или края html-страницы, заданных в скриптах или в расширениях CSS, и воспроизводимых в окне браузера, например Flash, для воспроизведения которой необходим интегрированных с браузером проигрыватель Flash, (у большинства пользователей он обычно установлен, ну и соответственно разрешена его работа, флэш активный элемент выполняемый на стороне клиента, т.е. в целях безопасности Activ X отключены). Итак возьмём для примера с популярнейшего сервера метеоновостей Gismeteo, flash— информеры «Фобос» выполненные размер кнопок 88х31, сообщающие о погоде в городах Витебск, Владимир и Одесса. Эти информеры не только выполнены во Flash Macromedia и сообщают ежесуточно погоду в этих городах, но и находятся на сервере Gismeteo, а гиперссылка установленная внутри флэши, вызывает загрузку страницы с подробным описанием погоды в том городе который указан в информере, естественно снова для удобства добавим скрипты останова скроллинга, ну а в бэкграунд нагло установим кнопку А-СТО в формате PNG: button.png (в бэкграунд можно устанавливать и анимированные картинки).
<table align="center" border="0" cellspacing="0" background="/button.png"> <tr><td><marquee scrollamount="88"> scrolldelay="5000"
<!--Начало кода внедрения информера для Витебска-->
<object type="application/x-shockwave-flash" data="http://img.gismeteo.ru/flash/fw88x31.swf?index=26666"
width="88">
<param name="movie"
value="http://img.gismeteo.ru/flash/fw88x31.swf?index=26666" />
<param name="menu" value="false" />
<param name="FlashVars" value="city=26666" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>
<!--Конец кода внедрения информера для Витебска-->
<!--Код внедрения информера для Одессы-->
<!--Код внедрения информера для Владимира-->
</marquee>
</td></tr></table> Если в браузер интегрирован флэш-плеер и разрешено выполнение активных компонентов веб-страницы, то мы можем убедится в мультиплицировании Flash-анимации, хотя звучит это противоестественно (анимация флэш-анимации). Но как обычно оговариваем, что подобные эффекты возможны в IE, а в браузерах других разработок, это будет выглядеть иначе, например в Опере, которая становиться всё более и более популярной, флеши в скроллинге ведут себя иначе чем в IE, и предложенный выше пример с информерами погоды, будет выводиться как последовательный скроллинг.
Итак выражение бегущая строка далеко не всегда соответствует действительности более подходящий термин: автоматический скроллинг или по-русски прокрутка, но надо заметить и это не всегда соответствует тому, что видят наши глаза.
в начало статьи
Старт и стоп в бегущей строке Апокриф веб-дизайна Бегущая строка JavaScript Marquee в текстовых браузерах Индексация Marquee
A-CTO Дайджест,
Карта сайта| Справочник HTML
Элемент <marquee> (от англ. «marquee» ‒ «бегущая строка») cоздаёт горизонтальную и вертикальную анимацию текста на странице в виде бегущей строки.
Содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы: строки или блоки текста, списки, объекты, таблицы и т.д.
Внимание: Элемент <marquee> вышел из употребления. Хотя он может продолжать работать в некоторых браузерах, его использование не рекомендуется. Используйте вместо него соответствующие стили CSS.
Синтаксис
<marquee>...</marquee>Закрывающий тег
Обязателен.
Атрибуты
- behaviorУстарел в HTML5
- Задаёт тип движения содержимого контейнера <marquee>.
- bgcolorУстарел в HTML5
- Цвет фона.
- directionУстарел в HTML5
- Указывает направление движения содержимого контейнера <marquee>.
- heightУстарел в HTML5
- Задаёт высоту анимированной области.
- hspaceУстарел в HTML5
- Устанавливает размер отступа от левого и правого края бегущей строки.
- loopУстарел в HTML5
- Устанавливает количество повторов анимации.
- scrollamountУстарел в HTML5
- Скорость движения контента.
- scrolldelayУстарел в HTML5
- Величина задержки в миллисекундах между движениями.
- truespeedУстарел в HTML5
- Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
- vspaceУстарел в HTML5
- Вертикальные поля вокруг содержимого.
- widthУстарел в HTML5
- Ширина анимированной области.
Элемент поддерживает глобальные атрибуты и события.
Стилизация по умолчанию
В качестве альтернативы <marquee> применяется стилевое свойство animation.
Различия между HTML 4.01 и HTML5
Элемент <marquee> вышел из употребления.
Пример использования:
Текст с выделенным словом:
Спецификации
Поддержка браузерами
| Элемент | ||||||
| <marquee> | 3+ | 1+ | 4+ | 1+ | 1+ | 1+ |
| Элемент | ||||
| <marquee> | 1+ | 1+ | 6+ | 1+ |
Учебник HTML
HTML уроки: HTML Элементы
Бегущая строка с помощью тега marquee
Тег marquee разработан для создания бегущий строки текста на странице без применения javascrypt средств, что в общем-то удобно, но это нестандартный тег.Тег поддерживает значительное количество атрибутов и почитать о них можно на htmlbook.ru.
Касаемо Blogger, тег marquee нормально работает в Blogger‘е и даже его можно вставлять в заголовок статьи.
Привожу готовые «бегущие строки», вставлять в любое место (статья, шаблон, гаджет) в html режиме:
1) Слева направо:
Трололо школоло
<marquee behavior="scroll" direction="left">Трололо школоло</marquee>
2) Слева направо и обратно:
Съешь ещё этих мягких булок
<marquee behavior="alternate">Съешь ещё этих мягких булок</marquee>
3) Снизу вверх:
Осбака бывает кусачей только от жизни собачей
<marquee behavior="scroll" direction="up">Осбака бывает кусачей только от жизни собачей</marquee>
4) Разные скорости движения текста:
Первая передачаЧетвёртая передача передачаПятая передача
<marquee behavior="scroll" direction="left" scrollamount="1">Первая передача</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Четвёртая передача передача</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Пятая передача</marquee>
5) Картинка в бегущей строке:
<marquee behavior="scroll" direction="left"><img src="http://3.bp.blogspot.com/-Sk8ykYwtpiQ/TlNNcF8Pu-I/AAAAAAAAF0A/MFsh9oSf5C8/s1600/blogger.png" alt="smile" /></marquee>
6) Картинка с текстом в бегущей строке:
Blogger, блин, не для чайников.
<marquee behavior="scroll" direction="left"><img src="http://3.bp.blogspot.com/-ctoLSSw14Js/ToKyyeEoHUI/AAAAAAAAF9Y/hoxdL8FZNWM/s1600/man.jpg" alt="smile" /><br /> <p>Blogger, блин, не для <a href="http://blogger.omg-linux.ru/2012/01/blogger.html" target="blank" alt="Яндекс Поиск в каждый сайт!">чайников</a>.</p></marquee>
7) Мигающий текст:
Налетай, халява!!!
<marquee direction="left"><blink> Налетай, халява!!! </blink></marquee>
Marquee позволяет задавать тексту любые свйоства в соответствии с html правилами.
1) Размер текста:
Лягушки в обмороке
<marquee> Лягушки в обмороке </marquee>Размер шрифта задаются в пикселях (например, 20px)
2) Цвет текста + ссылки (при наведении текст останавливается):
Картинки в Blogger и Яндекс → Картинки в Blogger. Яндекс на связи
<marquee behavior="scroll" align="middle" direction="left" scrollamount="4"><a href="http://blogger.omg-linux.ru/2012/01/indeksatsia-kartinok-v-blogger-yandex.html">Картинки в Blogger и Яндекс</a> → <a href="http://blogger.omg-linux.ru/2012/01/indeksatsia-kartinok-v-blogger-otvet.html">Картинки в Blogger. Яндекс на связи</a></marquee>Где:
style=»color:#0f66bd — цвет текста (в демо цвет не изменился из-за жёстких настроек css в моём шаблоне)
3) Фон текста:
Любите Родину — Мать вашу!
<marquee bgcolor="#цвет_полосы"> Любите Родину - Мать вашу! </marquee>
По мотивам этой статьи.
Другие статьи по теме бегущая строка:
Новостная бегущая строка для блога.
Бегущая строка последних сообщений блога.
Бегущая строка на сайте: тег MARQUEE — Как индексируются бегущие строки?
“Бегущая строка” в HTML создается при помощи тега <marquee>. Она может быть либо горизонтальной, когда двигаются все буквы в строке, либо в виде вертикального блока, когда перемещаются целые строки заранее отформатированного текста. С помощью бегущей строки на странице сайта создается движение, которое привлекает глаз пользователя, и это можно использовать веб-мастеру для своих целей. Давайте посмотрим, какую пользу для сайта можно извлечь из бегущих строк
Как сделать бегущую строку и для чего она нужна
Чтобы сделать бегущую строку на сайте, нужно в приготовленное место вписать HTML-тег MARQUEE. Чтобы это сделать правильно, следует заглянуть в справочник по ХТМЛ, которых в интернете довольно много. Однако не все браузеры понимают этот тег! Поэтому не удивляйтесь, если, сделав все правильно, бегущая строка на экране не появится. Чтобы проверить, понимает ли ваш браузер бегущие строки, и заодно посмотреть, как это выглядит на экране здесь:
Как сделать бегущую строку? Пример бегущей строки на сайте
Зачем нужна бегущая строка? Самое главное ее назначение — привлечь внимание пользователя. Если начало текста в строке покажется ему интересным, то он неприменно дождется окончания фразы. За это время ему на глаза попадутся рекламные объявления, кнопка “Купить” и разные другие элементы, на чем зарабатывают сайты. Вторая польза от бегущих строк — увеличить время пребывание посетителя на странице, это пойдет сайту лишь на пользу: у поисковиков, которые отслеживают поведение пользователя, сложится впечатление, что страница заинтересовала человека, раз он не вышел с нее сразу же, как зашел.
Однако у бегущей строки есть и свой недостаток, и он вытекает из ее первого достоинства, из приметности. Бегущая строка может ОТВЛЕЧЬ внимание посетителя от более нужных вещей, и, прочитав ее до конца, он может уже забыть, что собирался кликнуть по рекламе или купить товар. К тому же анимированных строк, как и рисунков, не должно быть много на странице, чтоб не создавалось эффекта “мелькания”. Одним словом, наша задача — рассказать о том, как это сделать и для чего можно использовать, а применять или нет бегущую строку на своих сайтах — решать вам. Ведь разработка сайтов — процесс строго индивидуальный, и общих рекомендаций тут дать нельзя.
Индексируется ли бегущая строка на сайте Гуглом?
Чтобы получить ответ, проще всего сделать такую строку на сайте, а затем попробовать найти в Гугле фразу, поставленную в HTML-тег marquee. В ходе эксперимента было выявлено, что поисковая система Гугол индексирует бегущие строки, несмотря на то, что далеко не всем пользователям они видны (о том, что не все браузеры корректно отрабатывают это тег, мы писали выше).
Бегущая строка не рассматривается поисковыми системами интернета как метод “черной оптимизации” сайта, и ее применение безопасно. Другое дело, насколько высоко будут ранжироваться слова при поиске? Это зависит от того, где расположить бегущую строку: если в начале страницы — то довольно высоко, если в самом конце — то хуже всего. К тому же, размещая тег MARQUEE в конце экрана, есть вероятность, что посетитель его попросту не увидит, особенно если страница “длинная” по вертикали.
Важно понимать, что независимо от того, какая часть строки показывается в отведенном для нее поле, в HTML-коде страницы она присутствует полностью. То есть, соблазн сделать очень длинные строки и вписать их в ограниченное пространство, да еще так, чтобы все содержание индексировалось, можно полностью реализовать с помощью тега <marquee> — важно лишь чувство меры. Как вариант, туда можно прописать ссылку на последнюю публикацию или даже дать ссылку на другой сайт — но при этом следует избегать коротких анкоров, чтобы пользователю не было трудно попасть мышкой в движущийся текст.
Как сделать бегущую строку на сайте — сайт на PHP своими руками
Как сделать бегущую строку на сайте, тег — < marquee > , примеры бегущей строки.
Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку. Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы. В бегущей строке можно показывать рекламные обьявления, изображения, смайлики, баннеры и т. д.
Сама бегущая строка создается тегом
Стандартная запись бегущей строки такая —
< marquee > текст внутри блока, или изображение, или несколько изображений, или ссылки </marquee > ,
соответствует такой записи —
< marquee behavior=»scroll» direction=»left» loop=»-1″ scrollamount=»6″ scrolldelay=»0″ > наполнение … < /marquee >
Атрибуты тега MARQUEE.
| direction=» « — атрибут устанавливающий направление скроллинга: Значения: up — движение снизу верх | behavior=» « — атрибут устанавливающий тип скроллинга: Значения: |
width=» « — устанавливает ширину блока для строки height=» « — устанавливает высоту блока hspace=» » — отступа в пикселях от вертикальных границ блока vspace=» » — отступ в пикселях от горизонтальных границ блока | bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллинга style=» « — атрибут указывает стиль форматирования блока и контента class=» « — атрибут внедрение стиля форматирования блока и контента |
loop=» « — определяет количество циклов перемещения «-1» или «infinite» — безконечное перемещение наполнения в блоке «N» — целое число, задающее количество показов в блоке | bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллинга |
Атрибут scrollAmount — устанавливает скорость движения строки.
Примеры бегущей строки.
простая строка — по умолчанию
заданные размеры блока строки
меняем фон блока
движение слева направо
постоянное движение
снизу вверх
сверху вниз
меняем скорость на маленькую
медленное движение текста снизу вверх и наоборот
строка со ссылкой на сайт с примерами
HTML — код примеров бегущей строки.
простая строка — по умолчанию
заданные размеры блока строки
меняем фон блока
движение слева направо
постоянное движение
снизу вверх
сверху вниз
меняем скорость на маленькую
медленное движение текста снизу вверх и наоборот
строка со ссылкой на сайт с примерами
Вот такие простые примеры бегущей строки, а проявив фантазию, или определив цели для использования текстов в таком блоке, можно придумать довольно невероятные варианты написания бегущих строк для своих сайтов.
Я сама блоггер: Бегущая строка для Blogger
Бегущая строка для Blogger
Такую бегущую строку Вы можете легко (без скрипта) сделать для своего блога или сайта! Подробности читайте в статье.Текст может двигаться и вниз, и влево, и вправо 🙂
Хорошим элементом для привлечения внимания посетителей блога будет бегущая строка. В тексте «бегучки» можно просто написать приветствие для всех или какую-то новость.
Настроить можно цвет, шрифт текста, фон и размер блока с бегущей строкой, а также направление движения текста.Если Вам не хочется разбираться в настройках бегущей строки, то можно воспользоваться всего лишь одной строкой html-кода:
<marquee>Текст бегущей строки</marquee>
Выглядеть она будет так:Текст бегущей строки
Далее расскажу о том, как настроить внешний вид бегущей строки.
1. Направление движения.
Стандартно «бегучка» движется влево.
1) Не знаю, пригодится ли это кому-то, но чтобы текст двигался вправо, нужно добавить в код параметр direction=»right» И полный код строки будет таким:
<marquee direction=»right»>Ваш текст бегущей строки</marquee>
Ваш текст бегущей строки
<marquee direction=»up»>Текст бегущей строки</marquee>
Текст бегущей строки
Блок, где движется текст, довольно большой. Ниже смотрите, как изменить высоту блока фона.
3) Код, который нужно использовать для «отправки» строки вниз:
<marquee direction=»down»>Текст бегущей строки</marquee>
Текст бегущей строки
4) Фиксируем бегущую строку — дойдя до левой границы сообщения (или гаджета) строка должна остановиться. Нам будет нужен код:
<marquee behavior=»slide»>Текст бегущей строки останавливается</marquee>
Текст бегущей строки останавливается
2. Отрегулируем скорость движения текста. Для этого добавим параметр scrollamount=»2″ Чем больше будет цифра, тем быстрее будет бежать текст )).
Пример: <marquee scrollamount=»2″>Текст бегущей строки</marquee>
Текст бегущей строки
3. Хотите цвет текста или тип шрифта изменить? Не проблема!
1) Изменить цвет текста бегущей строки: style=»color: #FF0000″
Например: <marquee style=»color: #FF3300″>Цветная бегущая строка</marquee>
Цветная бегущая строка
2) Шрифт «бегучки»: style=»font-family: verdana»
3) Изменить можно как сам тип шрифта, так и его размер (цифрой):
4. Добрались до фона. При желании настраиваем фон блока с бегущей строкой.
1) Высота блока (фона). За это отвечает параметр height=»35″, например. Указывайте нужную Вам цифру.
2) Ширину блока (фона) бегущей строки регулируем при помощи width=»300″.
3) И, конечно же, цвет фона. Пример кода:
<marquee bgcolor=»#FF9999″>Текст на цветном фоне</marquee>
Текст на цветном фоне
Общий принцип добавления параметров бегущей строки:
берем основной код <marquee>Текст бегущей строки</marquee> и после первого тега marquee через пробел добавляем нужные настройки.
Приведу пример кода бегущей строки на голубом фоне с движением вверх (сама строка в начале статьи):
<marquee тип шрифта + размер шрифта + цвет текста + цвет фона + высота фона + ширина фона + движение вверх + скорость движения>Текст моей бегущей строки</marquee>
<marquee bgcolor=»#0099FF» height=»200″ direction=»up» scrollamount=»3″>Такую бегущую строку Вы можете легко (без скрипта) сделать для своего блога или сайта! Подробности читайте в статье. Текст может двигаться и вниз, и влево, и вправо :)</marquee>
! И еще. Все коды, которые будете брать из статьи, сначала вставьте в блокнот или другой редактор кода, добавьте нужные параметры, и только потом вставляйте в свою статью в режиме HTML или в гаджет HTML/JavaScript.
P.S. В следующей статье расскажу, как вставить в бегущую строку ссылку или картинку.
Как сделать бегущую строку HTML
Бегущая html строка очень интересная штука. С ее помощью можно прокручивать фрагмент текста вертикально либо горизонтально, вверх или вниз, в зависимости от настроек. Это можно сделать с помощью тега <marquee>.
Примечание: вместо тега <marquee> рекомендуется использовать Javascript и CSS для создания таких эффектов.
Атрибуты тега <marquee>
Ниже приводится список атрибутов, которые могут использоваться с тегом <marquee>:
| Атрибут | Описание |
| width | Определяет ширину бегущей строки. Значение задается в процентах: 10%, 20% и так далее |
| height | Определяет высоту бегущей строки. Значение задается в процентах: 10%, 20% и так далее |
| direction | Указывает направление, в котором должна двигаться бегущая строка Значения могут быть: вверх (up), вниз (down), вправо (right), влево (left) |
| behavior | Определяет тип прокрутки бегущей строки |
| scrolldelay | Определяет паузу перед следующей прокруткой |
| scrollamount | Определяет скорость прокрутки бегущей строки |
| loop | Определяет сколько раз бегущая строка будет прокручиваться при первом открытии страницы или после перезагрузки |
| bgcolor | Определяет цвет фона |
| hspace | Определяет горизонтальное пространство, в котором будет двигаться бегущая строка |
| vspace | Определяет вертикальное пространство, в котором будет двигаться бегущая строка |
Ниже приведены несколько примеров, чтобы продемонстрировать использование бегущей строки.
Пример 1:
<marquee>Это стандартный пример бегущей строки</marquee>
Вот результат:
| Это стандартный пример бегущей строки |
Пример 2:
<marquee>Ширина бегущей строки 50%</marquee>
Результат будет таким:
| Ширина бегущей строки 50% |
Пример 3:
<marquee direction=»right»>Текст прокручивается слева на право</marquee>
Такой результат:
| Текст прокручивается слева на право |
Пример 4:
<marquee direction=»up»>Текст прокручивается снизу вверх</marquee>
Результат:
| Текст прокручивается снизу вверх |
Ставив лайк Вы помогаете сайту 🙂 Статьи по теме: