01 · Визуал
Бегущая строка в Tilda
готовый код.
Плавная бесконечная строка для преимуществ, услуг, брендов или коротких сообщений.
Забрать код ↓- Технология
- HTML + CSS
- Установка
- 5 минут
- Куда вставлять
- Блок T123
- Обновлено
- 08.09.2026
/ Демонстрация
Сначала посмотрите,
как это работает.
Live demoБегущая строка
Сайты●Реклама●SEO●●●●
/ Код
Скопируйте.
Вставьте. Опубликуйте.
Код не требует сборки или установки библиотек. Перед запуском замените значения, отмеченные в инструкции ниже.
Готовый код
<div class="tselno-marquee" aria-label="Наши направления">
<div class="tselno-marquee__track">
<span>Сайты</span><i>●</i><span>Реклама</span><i>●</i><span>SEO</span><i>●</i>
<span aria-hidden="true">Сайты</span><i aria-hidden="true">●</i>
<span aria-hidden="true">Реклама</span><i aria-hidden="true">●</i>
<span aria-hidden="true">SEO</span><i aria-hidden="true">●</i>
</div>
</div>
<style>
.tselno-marquee {
--speed: 18s;
--background: #d9ff43;
--color: #10110f;
overflow: hidden;
padding: 18px 0;
background: var(--background);
color: var(--color);
border-top: 1px solid currentColor;
border-bottom: 1px solid currentColor;
}
.tselno-marquee__track {
width: max-content;
display: flex;
align-items: center;
gap: 28px;
padding-right: 28px;
animation: tselno-marquee var(--speed) linear infinite;
}
.tselno-marquee span {
font: 700 clamp(24px, 4vw, 58px)/1 Arial, sans-serif;
text-transform: uppercase;
white-space: nowrap;
}
.tselno-marquee i { font-size: 8px; font-style: normal; }
.tselno-marquee:hover .tselno-marquee__track { animation-play-state: paused; }
@keyframes tselno-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.tselno-marquee__track { animation: none; }
}
</style>/ Установка
Четыре шага.
- 01
Добавьте внизу страницы блок T123 из категории «Другое».
- 02
Вставьте код целиком, замените слова внутри тегов span на свои.
- 03
При необходимости измените скорость, фон и цвет в переменных --speed, --background и --color.
- 04
Опубликуйте страницу: в редакторе Tilda код может отображаться только как текст.
/ Настройки
Подстройте под себя.
- Скорость
- Переменная --speed. Чем больше секунд, тем медленнее движение.
- Цвета
- Переменные --background и --color принимают любые HEX-значения.
- Размер
- Измените значения clamp() в правиле .tselno-marquee span.
/ Нужна доработка
Не нашли нужное?
Соберём под ваш сайт.
Опишите задачу и пришлите ссылку на страницу. Посмотрим, можно ли решить её готовым кодом или нужна индивидуальная разработка.
Обсудить в Telegram ↗