Как сделать бегущую строку
Тег создает бегущую строку на странице. На самом деле содержимое контейнера не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.
Первоначально тег был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.
Синтаксис
Атрибуты
behavior Задает тип движения содержимого контейнера . bgcolor Цвет фона. direction Указывает направление движения содержимого контейнера . height Высота области прокрутки. hspace Горизонтальные поля вокруг контента. loop Задает, сколько раз будет прокручиваться содержимое. scrollamount Скорость движения контента. scrolldelay Величина задержки в миллисекундах между движениями. truespeed Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay . vspace Вертикальные поля вокруг содержимого. width Ширина области прокрутки.
Закрывающий тег
Валидация
Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.
HTML 4.01 IE Cr Op Sa Fx
Тег MARQUEE Бегущая строка в HTML
Таким же образом в HTML может перемещаться изображение:
В XHTML, как и в HTML 5, бегущая строка запрещена, точнее запрещены теги да и с дизайнерской точки зрения бегущая строка — это вчерашний день. Но! Предположим, что вы все-таки решили разместить у себя на сайте или на отдельной его странице бегущую строчку, тогда используйте для такой страницы структуру документа HTML 4.01.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML код iframe 
Бегущая строка в HTML 
HTML теги формы
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Бегущая строка в HTML? – Не вопрос!
Как сделать бегущую строку? #50905
Перейдите к редактированию той страницы, на которой Вы планируете разместить бегущую строку (список страниц — нажать на страницу — выбрать «Редактирвать содержимое» — «Текст страницы»).
Шаг 4
В текстовом редакторе перейдите к HTML-редактору:
Шаг 5
В открывшемся окне вставьте тег в конце предложения, которое будет являться бегущей строкой.
Обратите внимание!
- Вы можете изменить скорость бегущей строки, для этого используйте атрибут scrollamount ( устанавливает расстояние в пикселах между старым и новым положениями, которые влияют на скорость движения и плавность хода ). Таким образом получится примерно следующее:
Шаг 6
Нажмите «Ок» («Обновить») в HTML-редакторе.
Шаг 7
И сохраните изменения в текстовом редакторе. Бегущая строка готова.
Шаг 8
Перейдите на сайт . На нужной странице должна появиться бегущая строка.
Читайте также
Мы создаём веб-сайты для России и зарубежных рынков с 1997 года. Наша команда – более пятисот сотрудников в разных странах и городах.
Понимание потребностей онлайн-бизнеса, опыт взаимодействия с тысячами клиентов, высокая квалификация персонала, собственные «ноу-хау» и хороший объём заказов позволяют веб-студии Мегагрупп.ру предлагать услуги высокого качества по удивительно низким и «вкусным» ценам.
Этот сайт был создан на платформе
CMS S3 от Megagroup.ru
Данный сайт защищен с помощью reCAPTCHA и соответствует
Политике конфиденциальности и Условиям использования Google.
Как в Figma сделать бегущую строку
Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.
Иллюстрация: Оля Ежак для Skillbox Media
Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Figma — один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам — интерактивные элементы. В этой инструкции рассказываем, как с помощью стандартных функций прототипирования сделать бегущую строку.
В этой инструкции мы будем использовать функции прототипирования. Даже если вы ими раньше не пользовались, вам это не помешает сделать анимацию из инструкции. Но лучше, если вы заранее разберётесь, как работает прототипирование в Figma:
В этой инструкции мы будем использовать результат одной из предыдущих работ — объёмный «бублик». Но вы можете взять любую другую основу.
Подготовка текста
- Добавьте текстовый слой, введите в него любую короткую фразу и скопируйте её три раза через пробел.
- Кликните по слою правой кнопкой мыши и выберите Frame selection. Затем на боковой панели настроек в блоке Frame нажмите галочку Clip content.
- На верхней панели нажмите , чтобы сделать компонент. Затем нажмите
, чтобы сделать его копию. - В копии компонента выберите текстовый слой внутри фрейма и сдвиньте его влево так, чтобы первая фраза была скрыта. Создайте ещё одну копию компонента и сделайте то же самое — но в этот раз скрыть нужно первую и вторую фразу.
- У всех компонентов уменьшите фрейм так, чтобы в каждом из них была видна только одна фраза.
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Другие короткие инструкции по Figma
- Анимированный паттерн
- Пластиковая иконка
- «Жидкие» кнопки
- Объёмный леденец
- Анимированный слайдер
- Подсветка из градиентов
- «Светящийся» градиент
- Анимированный глитч
- Эффект линзы