Как в html изменить размер бегущей строки. Как сделать бегущую строку в html

А все бегут, бегут! И строка бежит. Стоп! Какая строка бежит? Конечно же, бегущая и, конечно же, перед глазами пользователей на чужом сайте. И себе хотите такую? Не беда, сейчас научимся, как сделать бегущую строку самостоятельно.

Кто и куда бежит?

Под бегущей строкой подразумевается текст определенной длины, совершающий поступательное или равномерное движение в любую из сторон на определенной области страницы. Также возможны вариации на тему ритмичности движения текста в бегущей строке.

Звучит скучно, но выглядит намного веселее.

Бегущая строка для сайта была популярна еще несколько лет назад. Тогда ее использовали в качестве новостной ленты или для отображения рекламных текстов. Главной проблемой такой строки было ее постоянство, которое вскоре надоедало.

Речь о том, что для замены бегущего текста нужно было часто залазить в html код сайта и менять его на новый. Понятно, что сильно часто этого не делали.

Сегодня весь процесс намного упростился. Если говорить о CMS, то для них написано много специализированных плагинов, сильно упрощающих реализацию бегущей строки.

Сейчас большая часть анимации в интернете создана с помощью технологии flash , и ползающий текст в веб-дизайне считается чуть ли не «винтажностью ». Но все равно бегающие перед глазами слова не утратили своей первозданной красоты.

Бегущая строка может быть использована как вывеска для названия сайта или его раздела. Также она идеально подойдет для размещения какой-нибудь умной мысли, которая может стать еще одним способом привлечения внимания со стороны посетителей сайта.

Бегущая строка, написанная на html

Бегущая строка на сайте html – это самый легкий вариант ее реализации с широким диапазоном для творчества.

За движение текста в html отвечает тег . Его синтаксис:

< marquee > текст

У этого тега много значений и атрибутов:

1) direction – устанавливает направление движения текста. Возможные значения атрибута:

• left- в правую сторону;
• right – влево;
• up – вверх;
• down – вниз;

2)behavior – отвечает за тип скроллинга. Принимаемые значения:

• scroll – движение текста в одном направлении;
• slide – одноразовое движение с последующей остановкой (всплывающий текст );
• alternate – в заданном направлении и назад.

3)loop – определяет количество циклов повторений. Возможные значения:

• infinite – бесконечное количество циклов (значение задано по умолчанию ).
• Целое число.

4)scrollamount – задает скорость перемещения бегущей строки. Принимает целое значение.

5)width – задается длина области перемещения.

6)height – задается высота области перемещения.

7)scrolldelay – устанавливает время задержки между циклами в миллисекундах.

Остальные атрибуты тега являются общестилевыми для всех элементов языка гипертекста.

Тег был создан специально под браузер Internet Explorer . До недавнего времени его не воспринимали некоторые другие браузеры, но сейчас его видят все.

И если немного «поиграться » с кодом, то можно заставить двигаться не только текст, но и картинку. А это уже начальный уровень анимации, господа!

Вот код этого примера:

Едрит-Мадрид! Куда меня несет!!!

Бегущая строка для Joomla

Владельцам сайтов на основе CMS приведенный выше пример не подойдет. Точнее, подойдет, но нужно знать, куда можно «влепить » этот пример в html код. А это непросто.

Все CMS построены на основе php , который является серверным языком программирования. Именно на нем написан код, отвечающий за генерацию страниц сайта. То есть каждый элемент страницы сайта («подвал », «шапка ») генерируется во время выполнения кода. Так что редактировать код php своего сайта на CMS не стоит.

Бегущая строка для joomla может быть реализована с помощью установки специальных плагинов. Один из них называется Moving Text . Рассмотрим его установку по шагам:

1. Заходим в панель управления Joomla . Через пункт верхнего меню «Расширения » переходим в «Менеджер расширений ».
2. На вкладке менеджера «Установка » выбираем вариант загрузки и жмем на кнопку «Установить »:

3. Затем переходим в «Менеджер плагинов ».
4. В списке внизу находим нужный плагин. Отмечаем его и нажимаем вверху на кнопку «Изменить ». Рядом с ней находится кнопка «Включить », служащая для активации расширения:

5. В следующем окне в полях «Основные параметры » устанавливаем параметры отображения бегущей строки (длина, скорость и интервал между циклами ). После внесения изменений не забудьте нажать на кнопку «Сохранить » (вверху справа ).
6. Затем через пункт главного меню «Материалы » переходим в «Менеджер материалов ». В нижнем списке отмечаем галочкой нужный материал и жмем на кнопку «Изменить » (кружок с карандашом ).
7. В редакторе жмем на кнопку «html ». На экране откроется окно редактора кода. Туда вставляем { text=Нужный текст }. Вместо «Нужный текст » пишем то, что нам нужно, и жмем на «Обновить »:

После этого в редактируемом материале появится бегущая строка:

Другие варианты реализации бегущей строки

Бегущий текст можно реализовать не только с помощью html и установкой плагинов. Неплохим считается вариант реализации на javascript . Вот пример его действия:

Вот кусок кода, который размещается в теге :

function outmsg(msg,ctrlwidth) { msg = " --- "+msg newmsg = msg while (newmsg.length < ctrlwidth) {newmsg += msg} document.write ("") document.write ("") document.write ("") rollmsg() } function rollmsg() { NowMsg=document.Outmsg.outmsg.value NowMsg=NowMsg.substring(1,NowMsg.length)+NowMsg.substring(0,1) document.Outmsg.outmsg.value = NowMsg bannerid=setTimeout("rollmsg()",100) }

А вот кусок скрипта, который нужно поместить в месте отображения бегущей строки:

outmsg("Вы видите строку! Она бежит! УРА!!!",70)

Также можно реализовать бегающий текст с помощью библиотеки jquery :

Код примера приведен полностью. При желании css , jquery и html можно разнести по отдельным файлам:

$(function() { var marquee = $("#marquee"); marquee.css({"overflow": "hidden", "width": "100%"}); // оболочка для текста в виде span (IE не любит дивы с inline-block) marquee.wrapInner(""); marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); marquee.append(marquee.find("span").clone()); // тут у нас два span с текстом marquee.wrapInner(""); marquee.find("div").css("width", "200%"); var reset = function() { $(this).css("margin-left", "0%"); $(this).animate({ "margin-left": "-100%" }, 12000, "linear", reset); }; reset.call(marquee.find("div")); }); .string{ width:600px; height:30px; margin:60px auto; line-height:28px; padding: 0 10px; border-radius:4px; box-shadow:0 1px 2px #777; -moz-border-radius:4px; -webkit-border-radius:4px; background: rgb(238,238,238); background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#eeeeee", endColorstr="#cccccc",GradientType=0); } Строка с текстом для показа какого-нибудь важного объявления на сайте.

Что в итоге?

Как видно из примеров, из всех реализаций бегущей строки самым «легковесным» является вариант на html . Да и его функционал намного проще для понимания и освоения. Но такая реализация не подойдет для сайтов на CMS . Для них остаются лишь плагины.

Создать бегущую строку на сайте – проще простого.
Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений и т.д.

Для создания бегущей строки используют тег:

Бегущая строка Бегущая строка

Атрибуты для бегущей строки

width ="..." - ширина бегущей строки (в пикселях или процентах).
Пример:
Бегущая строка

height ="..." - высота бегущей строки (в пикселях или процентах).
Пример:
Бегущая строка

bgcolor ="..." - цвет фона бегущей строки (цвет задается кодом или словом).
Пример:
Бегущая строка

behavior ="..." поведение бегущей строки. Имеет такие значения:

scroll - обычная прокрутка (по умолчанию);

slide – строка начинает свой путь из одного края и останавливается у другого;

alternate – строка будет двигаться от края до края
Пример:
Бегущая строка

direction ="..." - направление бегущей строки. Имеет такие значения:

left – движение текста влево (по умолчанию);

right – движение текста вправо;

up – движение текста снизу вверх;

down - движение текста сверху вниз
Пример:
Бегущая строка

scrollamount ="..." - скорость движения строки (в пикселях).
Пример:
Бегущая строка

scrolldelay ="..." - временной интервал между шагами (в миллисекундах).
Пример:
Бегущая строка

loop ="..." – сколько раз пробежит бегущая строка. Если в значение поставить «0»(По умолчанию), бегущая срока будет прокручивать текст бесконечное количество раз, если в значение поставить «2», тогда текст прокрутится 2 раза.
Пример:
Бегущая строка

hspace ="..." – отступ от левого и правого края бегущей строки (в пикселях).
Пример:
Бегущая строка

Если все собрать вместе, код бегущей строки в HTML будет выглядеть вот так:

Бегущая строка Бегущая строка

Бегущее изображение

Так как перемещали текст в бегущей строке, так можно переместить и изображение.

Достаточно между тегами вставить картинку:

Бегущая строка

Дополнение

В бегущую строку можно установить текст со ссылкой. Для этого нужно прописать следующий код в HTML:

Бегущая строка Бегущая строка на блоге сайт

Вот и разобрались с бегущей строкой в HTML-документе.

<
Часто при написании своего сайта, или его управлением, возникает потребность установить на сайт бегущую строку. Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы.

Используют бегущую строку для различных целей, например, для рекламного сообщения, новостей, акций, объявлений, изображений, смайликов, банеров и т.д.

Создать бегущую строку на сайте – проще простого.

Для создания бегущей строки используют вот этот специальный тег "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, открылись новые возможности и сделать какую-то анимацию на сайте стало намного проще. Бегущая строка попросту устарела. Но тем не менее, многие продолжают ее использовать и как показывает практика, часто в тренды возвращается то что было когда-то.

На этом все, спасибо за внимание. 🙂