Написать фрагмент html документа содержащий бегущую строку. Как легко делается в html бегущая строка?

27.01.2019

Бегущая строка в тексте документа является одним из легких способов оживить Web-страницу. Бегущие объекты всегда привлекают внимание, и пользователь обязательно прочтет что там написано. Так же бегущую строку можно применять, там где мало места. Но не следует злоупотреблять экономией места. Помните, что посетитель может просто не дождаться, когда в бегущей строке отобразится весь текст сообщения.

Бегущая строка создаётся с помощью контейнера тэгов ... со следующими атрибутами:

  • width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.
  • height="..." - высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).
  • bgcolor="..." - определяет цвет фона бегущей строки.
  • behavior="..." задает тип движения (поведение) бегущей строки и имеет следующие значения:
    • scroll - циклическая прокрутка текста из одного конца в другой Бегущая строка
    • slide - текст появляется с одного края и останавливается у другого. Бегущая строка
    • alternate - текст перемещается от одного края к другому и обратно. Бегущая строка
  • direction="..." - определяет направление движения бегущей строки. Имеет следующие значения:
    • left - текст движется влево по строке Бегущая строка
    • right - текст движется вправо по строке Бегущая строка
    • up - вся строка перемещается снизу вверх Бегущая строка
    • down - строка движется сверху вниз Бегущая строка
  • scrollamount="..." - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например:
    Бегущая строка - scrollamount="1"
    Бегущая строка - scrollamount="2"
    Бегущая строка - scrollamount="2"
  • scrolldelay="..." - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например:
    Бегущая строка - scrolldelay="100"
    Бегущая строка - scrolldelay="200"
    Бегущая строка - scrolldelay="300"
  • loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.
  • hspace="..." - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.
    Бегущая строка - hspace="10"
    Бегущая строка - hspace="0"
  • vspace="..." - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.
    Бегущая строка - hspace="0"
    Бегущая строка - hspace="10"

Ниже приведен пример кода для бегущей строки размеро 50 пикселей в высоту и 250 пикселей в ширину. Определена бесконечная прокрутка текста, текст перемещается слева направо и имеет ярко-голубом фоне.

Пример берущей строки.

А так выглядит результат этого кода:
Пример берущей строки.

Здравствуйте, дорогие друзья и гости моего блога! Снова приветствую Вас у себя на страницах. Если Вы зашли сюда, значит Вам нужен полезный совет по вопросу:

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

А в добавок Вы узнаете о том, как создать анимацию на сайте, без применения фотошоп! Просто применив HTML код и специальный тег. О котором я Вам по-секрету сегодня расскажу!

Все наверное видели рекламу бегущую строку, по телеку, в городе на вывесках? Да где ее только нет! Конечно видели и кто-то думаю, многие захотели ее применить себе на сайт блог! Но подумали, тут же «Да это наверное очень сложно?» Ничего подобного! Все до смешного просто и выполнимо! Я Вам сейчас расскажу и покажу...

Как сделать бегущую строку на сайте при помощи HTML кода!!!

Есть очень замечательный тег, который наверное почти всем известен, но не все его помнят и используют!

Вот он : «marquee»

А вот так мы сделаем, чтобы стока двигалась:


Теперь давайте сделаем нашу надпись цветной и более симпатичной! Как это сделать? Сейчас покажу:

Как сделать бегущую строку?

А давайте сделаем эту бегущую строку, наоборот! Справа на лево:

Как сделать бегущую строку?

А теперь снизу вверх:

Как сделать бегущую строку?

Ну, а если сверху вниз:

Как сделать бегущую строку?

Завораживает! Не правда ли? Давайте увеличим скорость нашей бегущей строки!

Как сделать бегущую строку?

Придадим медленный и плавный ход бегущей строке:

Как сделать бегущую строку?

Давайте дадим нашей бегущей строке дойти до границы блока и остановиться:

Как сделать бегущую строку?

Сделаем, чтобы бегала туда сюда от границ блока:

Как сделать бегущую строку?

Или вдруг Вам нужно сделать бегущую строку, разбегающуюся от центра в разные стороны:

Как сделать бегущую строку? Как сделать бегущую строку?

Давайте сделаем бегущую строку на цветном фоне в рамочке:

Как сделать бегущую строку?

Теперь в другую сторону и на белом фоне поместим нашу бегущую строку:

Как сделать бегущую строку?

Давайте теперь с Вами сделаем небольшой бегущую строку — мультик «анимашку»:


Может Вам нужен слайдер? Запросто можно его сделать! Без применения плагина:


Все делается очень просто. Вы не подумайте, я вам не вру! Ниже находится материал, в котором все коды 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. БЕГУЩАЯ СТРОКА С ИЗОБРАЖЕНИЕМ.

Пропишу ВСЕ ЭТИ ФОРМУЛЫ ЕЩЕ РАЗ, УЖЕ со всеми параметрами. (то есть к каждой новой формуле добавляется новое значение, и поэтому формула становится все длиннее. Если вам не нужны ВСЕ ПАРАМЕТРЫ, то берите формулы выше, там каждый параметр отдельно)

ПРОСТАЯ СТРОКА- ПО УМОЛЧАНИЮ ЗАДАННЫЕ РАЗМЕРЫ СТРОКИ МЕНЯЕМ ФОН БЕГУЩЕЙ СТРОКИ ДВИЖЕНИЕ СЛЕВА НАПРАВО ПОСТОЯННОЕ ДВИЖЕНИЕ В ОБЕ СТОРОНЫ
СНИЗУ ВВЕРХ СВЕРХУ ВНИЗ МЕДЛЕННАЯ СКОРОСТЬ ДВИЖЕНИЯ СТРОЧКИ МЕДЛЕННОЕ ДВИЖЕНИЕ ТЕКСТА СВЕРХУ ВНИЗ И НАОБОРОТ СТРОКА СО ССЫЛКОЙ НА САЙТССЫЛКА НА САЙТ (НАИМЕНОВАНИЕ)

Любой из этих параметров, вы сможете убрать сами. Например вам не нужен отдельный фон каждой строчки, то вы просто аккуратно сотрите этот параметр.

Или сотрите размеры строчки. Только помните что формула должна быть в угловых КАВЫЧКАХ, поэтому не убирайте их.


Пробуйте смелее и у вас все получится.

Internet Explorer Chrome Opera Safari Firefox Android iOS
3.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

HTML: 3.2 4.01 5.0 XHTML: 1.0 1.1

Описание

Тег создает бегущую строку на странице. На самом деле содержимое контейнера не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.

Синтаксис

...

Атрибуты

Задает тип движения содержимого контейнера . Цвет фона. Указывает направление движения содержимого контейнера . Высота области прокрутки. Горизонтальные поля вокруг контента. Задает, сколько раз будет прокручиваться содержимое. Скорость движения контента. Величина задержки в миллисекундах между движениями. Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay . Вертикальные поля вокруг содержимого. Ширина области прокрутки.

Закрывающий тег

Обязателен.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

HTML 4.01 IE Cr Op Sa Fx

Тег MARQUEE Lorem ipsum dolor sit amet...

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

Сама бегущая строка создается тегом < marquee > текст

, а точнее создаёт динамический эффект автоматического скроллинга. Тег MARQUEE - блочный контейнер, аналогичный тегам P DIV SPAN, в который помещается нужная информация для отображения. Все моменты рассматривать довольно долго и сложно для начала, но здесь ниже будут показаны основные моменты для управления бегущей строкой и показаны примеры, на которых можно тренироваться.

Стандартная запись бегущей строки такая -
< marquee > текст внутри блока, или изображение, или несколько изображений, или ссылки

,
соответствует такой записи -
< marquee behavior="scroll" direction="left" loop="-1" scrollamount="6" scrolldelay="0" > наполнение... < /marquee >

Атрибуты тега MARQUEE.

direction=" " - атрибут устанавливающий направление скроллинга:
Значения:
left - движение справа налево (по умолчанию)
right - движение слева направо
up - движение снизу верх
down - движение сверху вниз
 behavior=" " - атрибут устанавливающий тип скроллинга:
Значения:
scroll - скроллинг в одном из заданных направлений (по умолчанию)
slide - одноразовый скроллинг с остановом контента
alternate - возвратно-поступательный скроллинг

width=" " - устанавливает ширину блока для строки
height=" " - устанавливает высоту блока
hspace=" " - отступа в пикселях от вертикальных границ блока
vspace=" " - отступ в пикселях от горизонтальных границ блока

bgcolor=" "
style=" " - атрибут указывает стиль форматирования блока и контента
class=" " - атрибут внедрение стиля форматирования блока и контента

loop=" " - определяет количество циклов перемещения
"-1" или "infinite" - безконечное перемещение наполнения в блоке
"N" - целое число, задающее количество показов в блоке

bgcolor=" " - атрибут устаналивающий параметр цвета фона скроллинга

Атрибут scrollAmount - устанавливает скорость движения строки.

Примеры бегущей строки.

простая строка - по умолчанию
заданные размеры блока строки
меняем фон блока
движение слева направо
постоянное движение
снизу вверх

Сверху вниз
меняем скорость на маленькую
медленное движение текста снизу вверх и наоборот
строка со ссылкой на

HTML - код примеров бегущей строки.

простая строка - по умолчанию заданные размеры блока строки меняем фон блока движение слева направо постоянное движение снизу вверх сверху вниз меняем скорость на маленькую медленное движение текста снизу вверх и наоборот строка со ссылкой на

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

по материалам сайта

Всего комментариев - 2 . Можете оставить свой комментарий.

Роман 2012-08-09 20:45:46 сайт автора -

Спасибо! Классная штука!


Antonina 2012-12-05 11:38:33 сайт автора - http://prosuperdom.com

Спасибо за замечательную подборку строк. Разместила у себя на сайте строку со ссылкой. Правда,сначала текст бежал под зеленой строчкой. Увеличила ширину, стал бежать по строчке. Когда изменила текст ссылки, она поднялась вверх и пришлось снова уменьшать ширину. Вот такие вот пришлось проделать манипуляции. Но строчку удалось установить в конкретную статью. А как сделать строчку просто на главной странице сайта,если он на Вордпрессе. Куда вставлять необходимый код? Если можно, подскажите, пожалуйста. Добро пожаловать в гости!



Похожие статьи
Типы
  • Роутеры
  • Жесткие диски
  • Не включается
  • Принтеры
  • Тормозит
  • Зависает
  • Вирусы
  • Планшеты
Популярные статьи
Новые статьи