Коды для бегущей строки. Как сделать бегущую строку и бегущее изображение в дневнике. Другие варианты реализации бегущей строки

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

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

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

Бегущая строка формируется с помощью открывающего тега и закрывающего (закрывающий тег обязателен).

width=″…″ - ширина бегущей строки в пикселях или процентах от ширины экрана.

Height=″…″ - высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

bgcolor=″…″ - определяет цвет фона бегущей строки.

behavior=″…″ задает тип движения (поведение) бегущей строки и имеет следующие значения

scroll - циклическая прокрутка текста из одного конца в другой

slide - текст появляется с одного края и останавливается у другого.

alternate - текст перемещается от одного края к другому и обратно.

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

left - текст движется влево по строке

right - текст движется вправо по строке

up - вся строка перемещается снизу вверх

down - строка движется сверху вниз

scrollamount=″…″ - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например

scrollamount= ″1″

scrollamount= ″2″

scrollamount= ″3″

scrolldelay=″…″ - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например

scrolldelay=″100″

scrolldelay=″200″

scrolldelay=″300″

loop=″…″ - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.

hspace=″…″ - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.

hspace=″10″

hspace=″0″

vspace=″…″ - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.

hspace=″0″

hspace=″10″

Выставить по центру ставится в начале кода и закрывающий тег в конце кода.

HTML - коды бегущей строки

Сюда вставьте свой текст

Ваш текст

СПАСИБО за подписку!

your running text