Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений, изображений, смайликов, банеров и т.д.
Создать бегущую строку на сайте – проще простого.
Для создания бегущей строки используют вот этот специальный тег "marquee
", который и поможет вам сделать бегущую строку. Изначально он работал только в браузере Internet Explorer, но теперь почти во всех браузерах.(Не проверяла только в Google Chrome), в остальных работает нормально.
1. СТАНДАРТНАЯ ЗАПИСЬ БЕГУЩЕЙ СТРОКИ такая -
:
Бегущий текст
Вставьте заголовок, приветствие, объявление, между этими тегами (ВМЕСТО МОИХ СЛОВ "БЕГУЩИЙ ТЕКСТ"), и вы получите бегущую строку. Будет это выглядеть ВОТ ТАК.
ДЕЛАЕМ БЕГУЩУЮ СТРОКУ
Бегущей строкой может быть не только текст, но и картинка, и ссылка на какой то сайт. Может быть и любой текст, созданный вами на сайтах, создающих красивые надписи. Как например "горящий текст", в предыдущем посте.
Текст можно форматировать так же, как и просто в посте. Например сделаем его большим, жирным, цветным, курсивом и прочее.
А проявив фантазию, или определив цели для использования текстов в своем дневнике, можно придумать довольно невероятные варианты написания бегущих строк для своих постов.
Наиболее распространенные я вам попытаюсь показать.
2. Ширину и высоту бегущей строки можно задать определенными параметрами, то есть поставить ширину строки и ее высоту
. Теперь формула будет выглядеть вот такая.
Заданные размеры блока строки
Где width=" "
- ширина блока для строки
height=" "
- высота блока для строки
Выглядеть это будет вот так.
Задана высота и ширина строки.
3. МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ.
Фон бегущей строчки можно задать любой, какой вам нужен. Вот эта формула. Размеры строки можно не устанавливать. В первой формуле я их поставила, во второй нет.
Меняем фон СТРОКИ
где bgcolor=" "
- атрибут устаналивающий параметр цвета фона
Выглядит это вот так
меняем фон СТРОКИ
меняем фон СТРОКИ, без указания ширины и длины
4. ДВИЖЕНИЕ СЛЕВА НАПРАВО.
Поскольку по умолчанию строчка движется, справа на лево, то что бы сделать наоборот, применяем вот эту формулу.
Движение слева направо
Где left
- движение справа налево (по умолчанию)
right
- движение слева направо
Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СЛЕВА НАПРАВО.
5. ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ.
Можно задать движение строчки постоянно, то есть она будет двигаться попеременно в обе стороны.. Вот эта формула.
где alternate
Выглядеть это будет ВОТ ТАК
ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ
6. ДВИЖЕНИЕ СНИЗУ ВВЕРХ.
Строчка, или изображение могут двигатся не только в разные стороны, но и снизу - вверх. Здесь лучше поставить ограничение строчки,(особенно высоту) или картинки, иначе она будет бегать по всей странице, и займет очень много места. Вот эта формула.
>снизу вверх
Где up
- движение снизу верх
Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СНИЗУ ВВЕРХ
7. ДВИЖЕНИЕ СВЕРХУ ВНИЗ.
Можно заставить текст двигаться и наоборот СВЕРХУ ВНИЗ. Вот эта формула.
Сверху вниз
Где down
- движение сверху вниз
Выглядеть это будет ВОТ ТАК
ДВИЖЕНИЕ СТРОЧКИ ИЛИ КАРТИНКИ СВЕРХУ ВНИЗ
8. МЕНЯЕМ СКОРОСТЬ ДВИЖЕНИЯ НА БОЛЕЕ МЕДЛЕННУЮ.
Скорость движения строчки тоже можно поменять, сделать быстрее, или медленнее. Для этого используют вот такую формулу.
Меняем скорость на медленную
Где behavior=" "
- атрибут устанавливающий тип строчки
alternate
- возвратно-поступательное движение
direction=" "
- атрибут устанавливающий направление
scrollAmount ="1"
Выглядеть это будет ВОТ ТАК
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ
9. МЕДЛЕННОЕ ДВИЖЕНИЕ СТРОЧКИ СВЕРХУ ВНИЗ И НАОБОРОТ.
Регулировать скорость строчки вверх и вниз тоже можно. Для этого используют вот такую формулу.
Медленное движение текста снизу вверх и наоборот
Где alternate
- возвратно-поступательное движение
direction=" "
- атрибут устанавливающий направление(в нашем случае сверху вниз и наоборот)
scrollAmount ="1"
- устанавливает скорость движения строки. Цифру скорости можно менять.
Выглядеть это будет ВОТ ТАК
медленное движение текста снизу вверх и наоборот
11. БЕГУЩАЯ СТРОКА С ИЗОБРАЖЕНИЕМ.
Как я уже писала, что двигаться может не только строчка, но и любая картинка. Все выше приведенные формулы так же применимы и к картинкам. Только вместо СЛОВ, вставляется HTML - код картинки. Вот такая формула, к которой можно добавлять любые параметры движения.
Исходная картинка.
Добавим формулу бегущей строки, и выглядеть это будет ВОТ ТАК
Вот такие простые примеры бегущей строки, а проявив фантазию, можно придумать довольно невероятные варианты написания бегущих строк для своих сайтов.
Пропишу ВСЕ ЭТИ ФОРМУЛЫ ЕЩЕ РАЗ, УЖЕ со всеми параметрами. (то есть к каждой новой формуле добавляется новое значение, и поэтому формула становится все длиннее. Если вам не нужны ВСЕ ПАРАМЕТРЫ, то берите формулы выше, там каждый параметр отдельно)
ПРОСТАЯ СТРОКА- ПО УМОЛЧАНИЮ
ЗАДАННЫЕ РАЗМЕРЫ СТРОКИ
МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ
ДВИЖЕНИЕ СЛЕВА НАПРАВО
ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ
СНИЗУ ВВЕРХ
СВЕРХУ ВНИЗ
МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ
МЕДЛЕННОЕ ДВИЖЕНИЕ ТЕКСТА СВЕРХУ ВНИЗ И НАОБОРОТ
СТРОКА СО ССЫЛКОЙ НА САЙТССЫЛКА НА САЙТ (НАИМЕНОВАНИЕ)
Любой из этих параметров, вы сможете убрать сами. Например вам не нужен отдельный фон каждой строчки, то вы просто аккуратно сотрите этот параметр.
Или сотрите размеры строчки. Только помните что формула должна быть в угловых КАВЫЧКАХ, поэтому не убирайте их.
Пробуйте смелее и у вас все получится.
Почему было принято решение обновить и переделать имеющуюся строку. Дело в том, что раньше, чтобы сделать бегущую строку, использовался 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
Пример бегущего изображения:
