Почему было принято решение обновить и переделать имеющуюся строку. Дело в том, что раньше, чтобы сделать бегущую строку, использовался HTML тег, который сейчас считается устаревшим и его не советуют использовать, потому как в HTML5 его уже нет.
...
Браузеры еще поддерживают его, но как долго marquee будет обрабатываться? Вот поэтому, чтобы не рисковать, стоит от него отказаться и если бегущая строка вам все же необходима, то можно сделать ее с помощью CSS. Получится в итоге такое:
Как видите, результат такой же как и при использовании старого тега marquee. Делается бегущая строка очень просто. Вам нужно заключить тот элемент, что должен передвигаться по экрану в блок, которому мы присвоим класс marquee . так же внутри блока marquee все заключаем в тег .
Наш бегущий текст. Текст, который будет двигаться с права налево.
Marquee{ width:100%; white-space:nowrap; overflow:hidden; } .marquee span { color:#212121; font-size:25px; display:inline-block; padding-left:100%; -webkit-animation: marquee 10s infinite linear; animation: marquee 10s infinite linear; } @-webkit-keyframes marquee { 0%{-webkit-transform: translate(0, 0);} 100%{-webkit-transform: translate(-100%, 0);} } @keyframes marquee{ 0%{transform: translate(0, 0);} 100%{transform: translate(-100%, 0)} }
Тут есть несколько главных параметров, остальные уже можете менять и добавлять свои. Сначала стили для родительского блока.
- width:100%; - Задаем ширину нашему родительскому блоку marquee.
- white-space:nowrap; - запрещаем перенос слов на другую строку.
- overflow:hidden; - обрезаем все что выходит за наш блок с бегущей строкой, чтобы не было казусов.
- display:inline-block; - делаем наш span строчно-блочным элементом
- padding-left:100%; - делаем отступ слева на всю ширину родительского блока.
- -webkit-animation и animation - применяем анимацию к блоку. Время выполнения анимации 10 секунд. Можете менять значение на свое.
- @-webkit-keyframes marquee и @keyframes marquee - сама анимация.
Это что касается основных параметров. Как и сказал выше, остальные стили можете добавлять какие угодно.
Все же многие считают бегущую строку устаревшим элементом. Ведь с развитием HTML и CSS, открылись новые возможности и сделать какую-то анимацию на сайте стало намного проще. Бегущая строка попросту устарела. Но тем не менее, многие продолжают ее использовать и как показывает практика, часто в тренды возвращается то что было когда-то.
На этом все, спасибо за внимание. 🙂
В этой статье я расскажу о том как сделать бегущую строку на сайте с помощью специального тега HTML - . Для начала стоит отметить, что использование бегущий строки в качестве какой-то анимации на сайте - это уже давно не модно. Про такие сайты говорят, что они из прошлого века.
На мой взгляд, бегущие строки в нынешних условиях вообще лучше не использовать. В крайних случаях их можно использовать лишь для лучшей видимости важной информации (например, актуальные акции, скидки). Есть масса других современных способов как можно донести до пользователя полезную информацию (flash-анимация, баннеры).
Также стоит отметить, что есть и другой способ создания бегущей строки помимо тега marquee. Этот способ реализуется через JavaScript, но из-за нецелесообразности его применения (он нагружает страницу), мы даже не станем его рассматривать.
HTML тегИтак, в HTML есть специальный тег для создания бегущей строки: ... . У него есть множество атрибутов с параметрами, которые довольно просты, поэтому проблем с настройками не должно возникнуть. Ниже я разберу подробно все атрибуты и параметры тега marquee. Кстати, в него можно заключать не только текст, но и изображение и другие элементы сайта. Поэтому эта статья отвечает ещё и на вопрос как сделать бегущее изображение, объект и т.п.
Синтаксис тега
Объекты, которые должны перемещаться Атрибуты и параметры1. width="число/процент" - задает ширину бегущей строки в пикселях/процентах. Те, кто знаком с html наверняка знакомы с таким атрибутом. Например:
- width="240px" - задает ширину в 240 пикселей;
- width="40%" - задает ширину в 40% в зависимости от ширины блока, в котором находится объект;
2. height="число/процент" - задает высоту бегущей строки в пикселях/процентах. Пример можно привести такой же как и с первым атрибутом. Например:
- height="400px" - задает высоту в 400 пикселей;
- height="30%" - задает высоту в 30% в зависимости от высоты блока, в котором находится объект;
Примечание : если бегущая строка состоит только из одной строки, то высоту можно не указывать, поскольку она автоматически определиться в зависимости от размера шрифта, который задается параметром font-size: Npx .
3. bgcolor="цвет" - задает цвет фона контейнера. Выбрать цвет можно на странице: коды html цветов . Примечание : если атрибут bgcolor не задан, то по умолчанию фоном будет цвет фона страницы.
4. behavior="параметр"
- это один из самых важных атрибутов бегущий строки. Он задает поведение бегущей строки. Имеет довольно много различных вариантов:
. alternate
- бегущая строка перемещается циклично: справа налево, далее слева направо (бегает между краями). Например:
А так эта строка выглядит на сайте:
Строка с атрибутом behavior="alternate"
Scroll - бегущая строка перемещается за пределы области в том направлении, которое указывает атрибут direction (с параметром), а далее циклично повторяется. На мой взгляд этот вариант встречается чаще всего. Например:
. slide - очень похож на scroll, однако в конце строка останавливается и больше не повторяется. Например:
Строка с атрибутом behavior="slide" direction="right"
5. direction="параметры"
- задает направление движения бегущей строки. Может принимать следующие значения:
. down
- движение сверху вниз. Например:
Строка с атрибутом behavior="scroll" direction="down"
. up - движение снизу вверх. Например:
Строка с атрибутом behavior="scroll" direction="up"
. left - движение справа налево. Примечание: left установлено по умолчанию. Например:
Строка с атрибутом behavior="scroll" direction="left"
. right - движение слева направо. Например:
Строка с атрибутом behavior="scroll" direction="right"
6. hspace="число" - задает отступ строки по горизонтали до других объектов. Аналогичный атрибут есть у популярного тега img .
7. vspace="число" - задает отступ по вертикали до других объектов.
8. loop="число" - какое количество раз нужно прокрутить содержимое. В параметре указывается число, которое и задает количество повторений. Примечание: число -1 означает бесконечный цикл прокрутки. По умолчанию установлено -1.
9. scrollamount="число" - скорость движения бегущей строки. Число задает количество пикселей, на которое переместиться объект за один такт. Примечание: по умолчанию скорость равна 6 пикс./сек. Например:
Строка с атрибутом scrollamount="10"
10. scrolldelay="число" - задает задержку между шагами бегущей строки в миллисекундах. Например:
Строка с атрибутом scrolldelay="500"
Напоследок приведу 2 примера использования бегущих строк. Пример с использованием объекта div:
Бегущий элемент divБегущий элемент div
Пример бегущего изображения:
снизу вверхГде up - движение снизу верх
Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СНИЗУ ВВЕРХ
7. ДВИЖЕНИЕ СВЕРХУ ВНИЗ.
Можно заставить текст двигаться и наоборот СВЕРХУ ВНИЗ. Вот эта формула.
Сверху вниз
Где down - движение сверху вниз
Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СВЕРХУ ВНИЗ
8. МЕНЯЕМ СКОРОСТЬ ДВИЖЕНИЯ НА БОЛЕЕ МЕДЛЕННУЮ.
Скорость движения строчки тоже можно поменять, сделать быстрее, или медленнее. Для этого используют вот такую формулу.
Меняем скорость на медленную
Где behavior=" "
- атрибут устанавливающий тип строчки
alternate
- возвратно-поступательное движение
direction=" "
- атрибут устанавливающий направление
scrollAmount ="1"
Выглядеть это будет ВОТ ТАК
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ
9. МЕДЛЕННОЕ ДВИЖЕНИЕ СТРОЧКИ СВЕРХУ ВНИЗ И НАОБОРОТ.
Регулировать скорость строчки вверх и вниз тоже можно. Для этого используют вот такую формулу.
Медленное движение текста снизу вверх и наоборот
Где alternate - возвратно-поступательное движение
direction=" " - атрибут устанавливающий направление(в нашем случае сверху вниз и наоборот)
scrollAmount ="1" - устанавливает скорость движения строки. Цифру скорости можно менять.
Выглядеть это будет ВОТ ТАК
медленное движение текста снизу вверх и наоборот
11. БЕГУЩАЯ СТРОКА С ИЗОБРАЖЕНИЕМ.
Как я уже писала, что двигаться может не только строчка, но и любая картинка. Все выше приведенные формулы так же применимы и к картинкам. Только вместо СЛОВ, вставляется HTML - код картинки. Вот такая формула, к которой можно добавлять любые параметры движения.
Исходная картинка.
Добавим формулу бегущей строки, и выглядеть это будет ВОТ ТАК
Вот такие простые примеры бегущей строки, а проявив фантазию, можно придумать довольно невероятные варианты написания бегущих строк для своих сайтов.
Пропишу ВСЕ ЭТИ ФОРМУЛЫ ЕЩЕ РАЗ, УЖЕ со всеми параметрами. (то есть к каждой новой формуле добавляется новое значение, и поэтому формула становится все длиннее. Если вам не нужны ВСЕ ПАРАМЕТРЫ, то берите формулы выше, там каждый параметр отдельно)
ПРОСТАЯ СТРОКА- ПО УМОЛЧАНИЮ
ЗАДАННЫЕ РАЗМЕРЫ СТРОКИ
МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ
ДВИЖЕНИЕ СЛЕВА НАПРАВО
ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ
СНИЗУ ВВЕРХ
СВЕРХУ ВНИЗ
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ
МЕДЛЕННОЕ ДВИЖЕНИЕ ТЕКСТА СВЕРХУ ВНИЗ И НАОБОРОТ
СТРОКА СО ССЫЛКОЙ НА САЙТССЫЛКА НА САЙТ (НАИМЕНОВАНИЕ)
Любой из этих параметров, вы сможете убрать сами. Например вам не нужен отдельный фон каждой строчки, то вы просто аккуратно сотрите этот параметр.
Или сотрите размеры строчки. Только помните что формула должна быть в угловых КАВЫЧКАХ, поэтому не убирайте их.
Пробуйте смелее и у вас все получится.
Прежде чем перейти к изучению очередной большой главы, расскажу немного о некоторых мелочах, которые как-то выпали из общего строя, но порой без них никак не обойтись. Эти, фигурально выражаясь, элементы html языка помогут решить ряд задач с которыми частенько приходится сталкиваться при создании той или иной странички, так что не стоит относится к ним с пренебрежением.
СпецсимволыИногда, а порой даже часто, как например в этом сайте, в тексте не обойтись без знаков "меньше чем"-< и "больше чем"- > , но как быть если браузеры определяют или фразу заключенные в эти знаки как тег и следовательно не будут его отображать на мониторе? Или допустим Вам и вправду в тексте надо написать некий , но не для того чтобы дать очередную команду браузеру, а чтобы привести пример его написания посетителям страницы?
Для этих целей были придуманы так называемые спецсимволы.
Так например спецсимвол < - будет значить что в этом месте текста нужно поставить знак < а спецсимвол > обозначит символ >.
Все спецсимволы начинают писаться со знака & - амперсант этот знак указывает браузеру, что далее будет идти имя спецсимвола и воспринимать его следует не как текст, а как команду. Тут встаёт очередной вопрос, а как собственно в тексте предназначенного для вывода на экран поставить сам знак & - амперсант?
Для знака & тоже есть свой спецсимвол - &
Такая вот путаница получается..
Ещё, пожалуй, отдельного внимания заслуживает спецсимвол - это неразрывный пробел мы с ним уже сталкивались. Дело в том, что когда Вы пишите текст в блокноте или html редакторе "простых" пробелов между словами можно поставить сколь угодно много, но вот при чтении страницы браузером все они "удаляются" и между словами на странице будет не более одного пробела. Отсюда часто возникают проблемы с оформлением текста, красную строку, например, никак не сделать... вот и придумали люди спецсимвол он воспринимается браузером не как пробел, а как знак, только невидимый человеческому глазу.
А неразрывным он называется по тому, что группа таких пробелов воспринимается как цельное слово, следовательно, не переносится на следующую строку, если предложение подходит к установленным рамкам или же к краю окна. Так что в окне может появиться горизонтальная полоса прокрутки, если Вам это ненужно, ставьте между ними обыкновенные пробелы
Пример использования спецсимволов:
пример в примере
| <
/td> | < html> < head> < title> Моя первая страничка< /title> < /head> < body> < center>< h2> Привет мир!!!< /h2>< /center> < br> Это моя первая страничка! < /body> < /html> |
Пример в примере… навивает на философские мысли о бесконечности…
Ну вот теперь Вы знаете, как примерно выглядят все эти примерчики по "ту сторону экрана". Кстати, раз уж начал открывать военные тайны, данный пример является таблицей из двух ячеек, одна тоненькая слева выполняет сугубо декоративную функцию.. так вот если перед Вами встанет задача нарисовать ячейку таблицы без какого либо содержания вставляйте в неё знак пробела . Помните правило здесь что то обязательно должно быть? Спецсимвол пробела один из выходов в данном случае.
Кроме выше указанных есть еще целый ряд спецсимволов, чего там только нет: знаки зодиака, карточные масти, палочки, точечки, ёлочки, кругляшки, дроби.. Предназначены они уже не для каких-то "особых" задач, а просто выполняют свою роль ввиду отсутствия данных знаков на клавиатуре. Мою "коллекцию" спецсимволов можете
Горизонтальная линияПростой новый тег рисует в окне горизонтальную линию, не требует закрывающего тега. Часто применяется при верстке страницы в качестве декоративного элемента.
Имеет ряд атрибутов, align -выравнивание с одним из трёх значений (center, left, right ) может быть применен, если задана длина линии атрибут width в пикселях или процентах. Так же можно задать толщину линии атрибут - size , цвет атрибут - color , и при необходимости отключить тень линии noshade .
Горизонтальная линия
Это просто линия по умолчанию:
Это линия без тени:
Это линия окрашенная в кранный цвет:
Линия длиной 250 пикселей:
Линия длиной 250 и толщиной 5 пикселей:
Линия длиной 500, толщиной 50, синяя:
Примеры выравнивания:
По моему достаточно просто и эффективно.
Бегущая строкаТег заставляет текст помещённый в него двигаться в том или ином направлении, проще говоря делает его бегущей строкой. Бегущая строка имеет ряд настроек скроллинга, которые задаются следующими атрибутами:
behavior - определяет тип скроллинга, может иметь следующие значения:- alternate - колебательные движения от края к краю
- scroll - прокручивание текста. текст будет выходить за рамки экрана и снова появляться с противоположной его стороны
- slide - прокручивание текста c остановкой.
loop задает количество прокруток бегущей строки.
direction - направление движения текста. значения:
- up - вверх,
- down - вниз,
- left - влево,
- right - вправо.
height - высота строки,
width - ширина строки.
Бегущая строка
Бегающие строки
Бегущая строка по умолчанию
Бегущая строка слева направо
Бегущая строка бегает от края к краю
Бегущая строка со скоростью 10
Бегущая строка со скоростью 1
Эта строка будет прокручиваться только два раза
Бегущая строка с остановкой
Бегущая строка с фоном
Бегущая строка с ограничением ширены прокрутки
Бегущая строка снизу вверх
Бегущая строка с отступами от границ
Ну думаю, сами разберётесь, что к чему. Попробуйте использовать различные сочетания атрибутов для достижения нужного Вам эффекта. Добавлю лишь то, что с текстом бегущей строки можно делать то же самое, что и с обыкновенным текстом: менять размер, цвет, стиль, шрифт, сделать фразу из строки ссылкой.. прописывая нужные теги внутри тега
Бегущая строка на сайтеПри разработке сайта интересным элементом дизайна, привлекающим внимание, может стать бегущая строка . Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п. Кроме того, бегущая строка - самый простой способ создания анимации на сайте.
Бегущая строка формируется с помощью тега ... (закрывающий тег обязателен). Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают его, хотя он не входит в спецификацию HTML. Из-за этого наличие на странице тега приведет к невалидному коду, то есть ошибке при проверке, но её можно игнорировать. Так же следует учитывать, что браузеры по-разному отображают содержимое бегущей строки , так что при создании сайта обязательно проверяйте её вывод. Как всегда, на первом месте по непредсказуемости обработки HTML-кода стоит Internet Explorer , и тег для него не исключение. Также очень не любит этот тег и Google Chrome.
Для создания сайта особый интерес представляет то, что содержимое контейнера не ограничивается простым текстом и позволяет перемещать любые элементы веб-страницы - изображения, текст, таблицы, элементы форм и т.д.
Скидка 50% при заказе КАСКО через интернет. Услуга автомойки бесплатно каждому клиенту
Длину бегущей строки можно ограничить, задав атрибут width (длина строки) или hspace (отступ от границ прокрутки) в пикселях или процентах. К слову о браузерах, в данном примере пришлось перед бегущей строкой ввести неразрывный пробел () и задать style="letter-spacing: 0em" , так как без этой "химии" Internet Explorer 7 (Must die!) некорректно выводил бегущую строку при масштабах показа страницы более 100%.
Если сделать какой-либо элемент бегущей строки ссылкой, то получается интересный трюк "поймай меня!". В нашем примере, чтобы перейти по ссылке, надо успеть кликнуть мышкой по красному автомобилю.
Перемещение бегущей строки можно задавать не только по горизонтали, но и по вертикали. В этом случае, как и в предыдущем, можно указать размеры области, в которой будет происходить движение (атрибуты width и height тега соответственно):
В этом примере для вертикальной бегущей строки отличились уже браузеры Firefox 3.5 и Internet Explorer 7 и 8 . Кроме необходимости вставлять неразрывный пробел () перед началом бегущей строки, но и надпись "каско" выводится в них не по центру, а вот в Opera всё нормально. При желании, вы можете потренироваться в применении "тонких" методов HTML для центровки этой надписи в указанных браузерах.
Для бегущей строки можно устанавливать параметры перемещения элементов, что позволяет с легкостью создавать оригинальные эффекты. Рассмотрим основные атрибуты тега :
- behavior
- тип движения элементов бегущей строки:
- scroll - от края до края в одном направлении (по умолчанию),
- slide - после выполнения заданного числа проходов строка остаётся у левого или правого края страницы,
- alternate - направление перемещения меняется на противоположное после выполнения каждого цикла; - bgcolor - цвет фона бегущей строки;
- direction
- направление движения бегущей строки:
- left - влево (по умолчанию),
- right - вправо,
- down - вниз,
- up - вверх; - height - высота бегущей строки;
- hspace - отступ от левой и правой границ области прокрутки;
- loop - число показов бегущей строки, по умолчанию - infinite (бесконечное) повторение;
- scrollamount - смещение в пикселях за один шаг;
- scrolldelay - величина задержки в миллисекундах между шагами. Используется для замедления перемещения элементов бегущей строки;
- truespeed - минимальное значение задержки между шагами, по умолчанию 60 мс;
- vspace - отступ по вертикали от границ прокрутки;
- width - ширина бегущей строки.
Текст и элементы, расположенные внутри тегов ..., можно форматировать так же, как любые элементы веб-страницы.
Важное замечание: если длина бегущей строки (текст + картинки) больше ширины страницы сайта, то обязательно указывайте параметр width , чтобы не было искажений верстки в некоторых браузерах!
Если бегущая строка повторяется на нескольких страницах сайта, то её удобно оформить в виде вставки (include), которую можно оперативно менять. Подойдут любые способы включения фрагментов в страницу сайта. Один из самых простых - с помощью JavaScript
. На страницу, в том месте, где должна быть бегущая строка, вставляете
,
а сам текст бегущей строки выносите в отдельный файлик stroka.js,
который помещаете в ту же папку, что и страницы с бегущей строкой. Ниже приводится вариант такого файла с заданием цвета выводимого текста:
// Java Document
document.write("Текст бегущей строки
");
Проверьте, чтобы кодировка для этого файла была та же, что и у основной страницы. Если вы используете программу Adobe Dreamweaver , то для смены кодировки надо выбрать раздел меню Изменить - Свойства страницы - Название/кодировка . Также сменить кодировку скрипта можно в Microsoft Word . Для этого откройте документ, задайте нужную кодировку, если он выводится неверно (как это сделать, смотрите в "Справке Word"), а затем сохраните его следующим путем: Файл - Сохранить как - Обычный текст - Сохранить . В открывшемся окне вы можете задать необходимую кодировку.
Конечно же, с помощью JavaScript можно создать дополнительные эффекты при выводе бегущей строки. Например, добавив внутрь тега , вы получите остановку бегущей строки при наведении на неё курсора мыши и продолжение её вывода при убирании курсора:
Остановите меня!
Как указано выше, тег приводит к невалидному коду. Если вы хотите избежать этого, то можно воспользоваться другими методами, например, скриптами JavaScript и др. Подробно этот вопрос рассмотрен на сайте a-cto.narod.ru . Там же предложен и интересный вариант бегущей строки - побуквенный вывод текста, который можно задать для любой строки на сайте:
Для создания этого эффекта вставляете в нужное место странцы следующий код:
var line="Побуквенная бегущая строка
";
var speed=150;
var i=0;
function pechatanie() {
if(i++
