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

Принципиальная схема бегущей строки

Схема светодиодного табло включает в себя основные модули:


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

Блок управления оснащен интерфейсом, позволяющим подключать внешние устройств ввода информации (например, клавиатуры или компьютеры). Самодельные устройства собираются на базе контроллера Arduino, который содержит в себе интерфейс обмена информацией и блоки памяти для управления светодиодными элементами. Базовые модификации контроллера рассчитаны на установку 4 светодиодных модулей, но возможна установка дополнительного мультиплексора, позволяющего переключать сигналы между матрицами.

Bouncing Text

Here, we use CSS animations to create bouncing text. We do this by adding to the animation code. We also adjust the value passed in to so that the text doesn’t disappear from view as it bounces from side to side.

Source Code Result

<style style=»text/css»> .bounce { height: 50px; overflow: hidden; position: relative; background: yellow; color: orange; border: 1px solid orange; } .bounce p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(50%); -webkit-transform:translateX(50%); transform:translateX(50%); /* Apply animation to this element */ -moz-animation: bouncing-text 5s linear infinite alternate; -webkit-animation: bouncing-text 5s linear infinite alternate; animation: bouncing-text 5s linear infinite alternate; } /* Move it (define the animation) */ @-moz-keyframes bouncing-text { 0% { -moz-transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); } } @-webkit-keyframes bouncing-text { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); } } @keyframes bouncing-text { 0% { -moz-transform: translateX(50%); /* Browser bug fix */ -webkit-transform: translateX(50%); /* Browser bug fix */ transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); /* Browser bug fix */ -webkit-transform: translateX(-50%); /* Browser bug fix */ transform: translateX(-50%); } } </style>

<div class=»bounce»> <p>Bouncing text… </p> </div>

Bouncing text…

Параметр BGCOLOR

HTML: 3.2 4 XHTML: 1.0 1.1

Аргументы

Значение цвета можно задавать двумя способами.

2. По шестнадцатеричному значению

Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю.

Совпадает с цветом фона веб-страницы, обычно это белый цвет.

Пример 3. Цвет фона

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег MARQUEE, параметр bgcolor</title> </head> <body bgcolor=»#c0c0c0″> <marquee bgcolor=»white»>Lorem ipsum dolor sit amet…</marquee> </body> </html>

Процесс сборки строки

Чтобы сделать бегущую строку уличного типа, потребуется выполнить следующие действия:

  1. Уложить подготовленные светодиодные модули на ровную поверхность, расположенную горизонтально. Элементы располагаются световой частью вниз, на тыльной части имеется стрелка, поясняющая направление выкладки деталей (слева направо). Например, если подготовлены блоки, высотой 160, для получения строки, высотой 320 мм, требуется укладка 2 рядов элементов.
  2. Подготовить силовой каркас из алюминиевого профиля, который нарезается на фрагменты, соответствующие ширине будущего экрана. Для крепления профилей используются винты, которые вкручиваются в заводские отверстия, предусмотренные в светодиодных панелях. Сверлить дополнительные каналы не рекомендуется из-за риска повреждения элементов. При размещении каркаса необходимо предусмотреть место для монтажа блока питания.
  3. Соединить светодиодные блоки сигнальными жгутами и кабелями для подачи питания. Для подключения используются разъемы, оснащенные цветовой идентификационной маркировкой, предотвращающей ошибочную коммутацию.
  4. Смонтировать блок питания, к которому подводятся провода от светодиодных элементов.
  5. Соединить источник питания с контроллером управления при помощи проводки, имеющей сечение от 1,5 мм². Сечение кабеля подбирается в зависимости от силы тока, протекающей в цепи. Например, стандартный блок питания рассчитан на силу тока до 40 А при напряжении 5 В, что позволяет подключать от 6 до 8 светодиодных модулей. При использовании дополнительных светящихся элементов в конструкцию табло вводятся дополнительные блоки питания, работающие параллельно.
  6. Подключить светодиодные панели к блоку управления при помощи дополнительного шлейфа, подающего питание (постоянный ток напряжением 5 В). При коммутации необходимо учитывать полярность, для обозначения отрицательного выхода на всех устройствах используется текстовая надпись GND.
  7. Протестировать работу полученной конструкции, подав питание и нажав на кнопку, предусмотренную на контроллере.
  8. Провести герметизацию конструкции при помощи силиконового герметика, который наносится в стыки модулей. Полученная конструкция отличается повышенной жесткостью, поскольку модули соединены алюминиевыми профилями и герметиком.
  9. Изготовить монтажную рамку из алюминиевого профиля, для соединения элементов используются монтажные уголки и шурупы. Для обеспечения защиты от проникновения влаги во внутренние полости табло рекомендуется смазать линии соединения герметиком.
  10. Определить сторону, в которой будет располагаться силовой кабель и шнур для программирования, а затем просверлить в профиле отверстия.
  11. Изготовить заднюю стенку из панели, покрытой алюминиевой фольгой, или аналогичного по прочности материала. Линия стыка крышки и корпуса смазывается герметиком, детали соединяются шурупами.
  12. Обеспечить герметичность выводов проводки, залив герметиком отверстия. Перед установкой полученной конструкции на стену необходимо провести программирование с проверкой работоспособности.

Делаем светодиодную бегущую строку на Arduino своими руками

Сборка бегущей строки на базе светодиодной матрицы и Arduino – это несложная задача, которую можно выполнить даже в домашних условиях. Чтобы заставить буквы перемещаться на светодиодном табло не нужно быть программистом и владеть углублёнными знаниями электроники. В данной статье разберем, как собрать бегущую строку из готовых светодиодных матриц и Arduino Nano.

Для реализации идеи потребуется совсем немного деталей:

  • два светодиодных модуля, состоящих из четырёх матриц 8 на 8 пикселей;
  • держатель для батарейки типоразмера «Крона»;
  • батарейка на 9 вольт (CR-9V, ER-9V или их аналоги);
  • двухконтактный переключатель;
  • соединительные провода;
  • плата Arduino Nano;
  • термоклей.

Схема

На печатной плате используемого светодиодного модуля расположено 4 матрицы размером 8 на 8 пикселей. Каждое светодиодное табло управляется интегральной микросхемой (ИМС) MAX7219. Данная ИМС представляет собой контроллер управления led-дисплеями, матрицами с общим катодом и дискретными светодиодами в количестве до 64 шт.


Для более комфортного восприятия информации, выводимой на светодиодное табло, рекомендуется устанавливать несколько модулей. Для этого их объединяют в последовательно включенные группы, то есть выход первого модуля (out) подключают к входу второго модуля (in). Данная сборка состоит из двух модулей (16 матриц), длины которых вполне хватит для удобного прочтения целых предложений.

Сборка

Матричный модуль может иметь штырьковое соединение или контакты на плате в виде печатных проводников. От этого зависит способ их соединения. В первом случае для получения надежного электрического контакта задействуют жгут из проводков с коннекторами, а во втором придётся установить и запаять перемычки.

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

  • VCC – VCC
  • GND – GND
  • D IN – D OUT
  • CS – CS
  • CLK – CLK

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

На следующем этапе производят подключение Arduino со светодиодным модулем, подсоединяя провода на вход первой матрицы.

В зависимости от варианта исполнения модуля, операцию выполняют через разъёмное соединение или путем пайки по приведенной схеме:

  • VCC – 5V
  • GND – GND
  • D IN – PIN 11
  • CS – PIN 10
  • CLK – PIN 13.

На заключительной стадии сборки необходимо подключить питание от батарейки. Для этого минусовой контакт (черный провод) из отсека для кроны подключается на вывод GND Arduino.

Плюсовой контакт (красный провод) соединяют с выключателем, а затем с выводом №30 Arduino, предназначенный для подачи питающего напряжения от нерегулируемого источника. В тестовом режиме сделанная своими руками бегущая строка может быть запитана через микро USB от компьютера.

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

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

Программирование бегущей строки

Для программирования светодиодного табло используется утилита LedshowTW, которая устанавливается на компьютер или ноутбук. В настройках программы указывается тип соединения с панелью, утилита поддерживает проводной способ через порт USB, беспроводное программирование при помощи сети Wi-Fi и коммутацию панели с помощью витой пары со штекером LAN. Тип соединения зависит от модификации используемого контроллера.

После запуска утилиты необходимо войти в меню настройки параметров дисплея. В открывшемся диалоговом окне выбирается модель используемого контроллера, а затем заполняются поля Screen width и Screen height (длина и высота светодиодной части табло). Дополнительно необходимо изменить поле, определяющее цвет экрана (выбирается один из предложенных цветов). Дополнительный раздел регулировки пикселей остается без изменений.

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

HTML Marquees vs CSS Marquees


Marquees are often done using the HTML tag. The good thing about this tag is that most browsers support it. It is also extremely easy to use—it works just like any other HTML tag, and you can customize your marquee using attributes such as , , and more.

The main problem with using the tag is that it’s non-standard HTML. The tag is not actually part of the official HTML specifications. Marquee functionality is more suited towards CSS than they are to HTML.

Therefore, HTML marquees should be avoided and CSS marquees should be used instead.

Another benefit of CSS marquees is that they can incorportate more advanced features than the HTML version will allow. CSS can be used to create all sorts of weird and wacky styles, and there’s no reason you couldn’t incorporate some of these into your marquees.

Scrolling Image

To make a scrolling image, simply replace the text with an image. Also, here we replace the element with a element, and place the tag inside that.

Source Code Result

<style style=»text/css»> .marquee-outer { height: 100px; overflow: hidden; position: relative; color: orange; } .marquee-inner { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: scroll-left 5s linear infinite; -webkit-animation: scroll-left 5s linear infinite; animation: scroll-left 5s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll-left { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll-left { 0% { -moz-transform: translateX(100%); /* Browser bug fix */ -webkit-transform: translateX(100%); /* Browser bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Browser bug fix */ -webkit-transform: translateX(-100%); /* Browser bug fix */ transform: translateX(-100%); } } </style>

<div class=»marquee-outer»> <div class=»marquee-inner»><img src=»https://www.html.am/images/html-codes/marquees/fish-swimming.gif» width=»94″ height=»88″ alt=»Swimming fish»></div> </div>

Атрибуты¶

Атрибуты Значение Описание
behavior slide alternate scroll Тип движения slide — останавливается, достигнув края alternate — меняет направление, достигнув края scroll — появляется с противоположной стороны
bgcolor rgb(x,x,x)#xxxxxxcolorname Цвет фона
direction updownleftright Направление движения
height pixels% Высота области прокрутки
hspace pixels Горизонтальные поля вокруг тега
loop number Количество прокруток контента. Если данный атрибут не указан, контент будет прокручиваться постоянно.
scrollamount number Скорость прокрутки. Размер задается в пикселях. Значение по умолчанию 6.
scrolldelay seconds Величина задержки в миллисекундах между движениями. Значение по умолчанию — 85. Значения ниже 60 игнорируются.
truespeed seconds Позволяет использовать значения атрибута scrolldelay равные меньше 60-и миллисекунд.
vspace pixels Отступ по вертикали.
width pixels% Ширина области прокрутки.

Тег <marquee> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <marquee> ?

Цвет текста внутри тега <marquee>:

  • CSS свойство color определяет цвет контента и оформления текста.
  • CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <marquee>:

  • CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
  • CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
  • CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
  • CSS свойство word-break указывает перенос строки.

Другие свойства для тега <marquee>:

  • CSS свойство text-shadow добавляет тень к тексту.
  • CSS свойство text-align-last выравнивает последнюю строку текста.
  • CSS свойство line-height устанавливает межстрочный интервал.
  • CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
  • CSS свойство word-spacing устанавливает расстояние между словами в тексте.

CSS Animations

You can also use CSS animations to create a marquee. In fact, this is the recommended option. CSS animations are being included in the official CSS specifications (from CSS3) and it’s expected that this will be the default method for creating marquees in the future.

Here’s an example of using CSS animations to create the same effect as the above example.

See CSS marquee for more about this method.

Source Code Result

<style style=»text/css»> .marquee { height: 50px; overflow: hidden; position: relative; } .marquee p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); /* Apply animation to this element */ -moz-animation: scroll-left 5s linear infinite; -webkit-animation: scroll-left 5s linear infinite; animation: scroll-left 5s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll-left { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll-left { 0% { -moz-transform: translateX(100%); /* Browser bug fix */ -webkit-transform: translateX(100%); /* Browser bug fix */ transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); /* Browser bug fix */ -webkit-transform: translateX(-100%); /* Browser bug fix */ transform: translateX(-100%); } } </style>

<div class=»marquee»> <p>Scrolling text… </p> </div>

Scrolling text…

HTML Marquees vs CSS Marquees

HTML marquees (i.e. coded using the tag) are a quick and easy way to add a marquee to your web page or blog. With no more than one line of code, you can have scrolling text or images. And the code is easy to remember — just the tag plus a handful of attributes.

The problem with the tag is that it’s not actually part of the official HTML specification. Therefore, if you need your HTML pages to be fully standards compliant, you will need to avoid HTML marquees and use CSS marquees instead.

CSS marquees can be coded using CSS animations. CSS animations are being included in the official CSS specifications (from CSS3) and therefore, will allow you to use marquees, whilst keeping your web pages fully standards compliant.

The main downside with CSS marquees is that they can take longer to code (more code is required). However, they are more powerful, and you can use them to create advanced animations as well as a simple marquee.

Given that CSS is concerned with the style of the content and HTML is not, CSS is a logical tool to use for marquees.

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

direction=» « — атрибут устанавливающий направление скроллинга:      Значения:left — движение справа налево (по умолчанию)right — движение слева направоup — движение снизу верх down — движение сверху вниз behavior=» « — атрибут устанавливающий тип скроллинга:      Значения:scroll — скроллинг в одном из заданных направлений (по умолчанию)slide — одноразовый скроллинг с остановом контентаalternate — возвратно-поступательный скроллинг
width=» « — устанавливает ширину блока для строкиheight=» « — устанавливает высоту блокаhspace=» » — отступа в пикселях от вертикальных границ блокаvspace=» » — отступ в пикселях от горизонтальных границ блока  bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллингаstyle=» « — атрибут указывает стиль форматирования блока и контентаclass=» « — атрибут внедрение стиля форматирования блока и контента
loop=» « — определяет количество циклов перемещения «-1» или «infinite» — безконечное перемещение наполнения в блоке «N» — целое число, задающее количество показов в блоке bgcolor=» » — атрибут устаналивающий параметр цвета фона скроллинга

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

Скрипт для сайта: Бегущая строка.


Сегодня мы рассмотрим новый скрипт для сайта: Бегущая строка. При наведении мыши на бегущий текст, строка останавливается. Ниже приведен пример работы скрипта:

Теперь смотрим код скрипта, приведен в Листинге 1:

Листинг 1.

<marquee behavior=»scroll» scrollAmount=»3″ width=»400″ height=»20″ onMouseOver=»this.scrollAmount=0″ onMouseOut=»this.scrollAmount=3″>Здесь вставляем текст, который будет отображаться в бегущей строке.</marquee>

Теперь давайте разбираться с листингом, а также посмотрим, что здесь Вам можно изменять и что на что влияет?

Параметры scrollAmount=»3″иonMouseOut=»this.scrollAmount=3″влияют на скорость движения текста. Чем больше цифра, тем быстрее бежит текст. В данном случае установлена цифра 3, но мой оптимальный вариант.

Параметры width=»400″и height=»20″ как Вы понимаете это ширина и высота, поля где бежит текст, т.е. Вы можете изменить эти цифры и соотвественно изменятся ширина и высота этого поля.

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

Как Вы заметили, текст бежит справа налево. А если нужно наоборот, слева направо? Тогда используйте код Листинга 2.

Листинг 2.

<marquee behavior=»scroll» scrollAmount=»3″ direction=»right» width=»400″ height=»20″ onMouseOver=»this.scrollAmount=0″ onMouseOut=»this.scrollAmount=3″>Здесь вставляете текст, который будет отображаться в бегущей строке.</marquee>

Ниже Вы видите пример работы скрипта, здесь текст бежит слева направо:

Открыт новый раздел: Почтовая Рассылка. Здесь Вы узнаете какую огромную пользу приносит Почтовая Рассылка владельцам сайтов!

В коде Листинга 2, все значения такие же как и в коде Листинга 1, поэтому повторяться не буду.

Как вставить скрипт на сайт? Очень просто, копируете код нужного Вам Листинга, прописываете нужный текст, при необходимости изменяете цифровые значенияскорости, ширины и высоты и просто вставляете в то место кода своей web-страницы, где хотите видеть бегущую строку.

Вот и всё. Как видите все очень просто.


С этим читают