[html]<head>
<meta charset="UTF-8">
<style>
/* Настройки по умолчанию */
.modern-marquee {
/* 1. Основные стили текста */
--text-color: #333; /* Цвет текста */
--text-size: 24px; /* Размер шрифта */
--text-font: 'Arial', sans-serif; /* Шрифт */
--text-weight: bold; /* Жирность */
/* 2. Настройки анимации */
--anim-speed: 15s; /* Скорость (чем больше число, тем медленнее) */
--anim-direction: left; /* Направление: 'left' или 'right' */
/* Базовые стили контейнера */
display: block;
width: 100%;
overflow: hidden;
white-space: nowrap;
position: relative;
background: #f0f0f0; /* Фон для примера */
padding: 10px 0;
}
.modern-marquee span {
display: inline-block;
color: var(--text-color);
font-size: var(--text-size);
font-family: var(--text-font);
font-weight: var(--text-weight);
padding-left: 100%; /* Начальная позиция за пределами экрана */
/* Логика анимации */
animation: scroll-text var(--anim-speed) linear infinite;
}
/* Остановка при наведении */
.modern-marquee:hover span {
animation-play-state: paused;
}
/* --- Логика направлений --- */
/* Движение ВЛЕВО (Стандарт) */
@keyframes scroll-text-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* Движение ВПРАВО */
@keyframes scroll-text-right {
0% { transform: translateX(-100%); } /* Начинаем слева за экраном */
100% { transform: translateX(0); } /* Едем вправо до конца */
}
/* Применяем нужную анимацию в зависимости от переменной */
.modern-marquee[data-direction="left"] span {
animation-name: scroll-text-left;
padding-left: 100%;
padding-right: 0;
}
.modern-marquee[data-direction="right"] span {
animation-name: scroll-text-right;
padding-left: 0;
padding-right: 100%; /* Чтобы выезжал справа */
}
</style>
</head>
<body>
<!-- Пример 1: Обычный текст (влево) -->
<h3>Классический вид (Влево)</h3>
<div class="modern-marquee" data-direction="left">
<span>Это бегущая строка движется влево! Можно менять шрифт и цвет.</span>
</div>
<br><br>
<!-- Пример 2: Настройки через CSS переменные (в стиле атрибута style) -->
<h3>Красный текст, шрифт Courier, движение ВПРАВО</h3>
<div class="modern-marquee"
data-direction="right"
style="--text-color: red;
--text-font: 'Courier New', monospace;
--text-size: 30px;
--anim-speed: 8s;">
<span>Движение вправо! Скорость увеличена, шрифт изменен.</span>
</div>
<br><br>
<!-- Пример 3: Градиентный текст и свой шрифт -->
<h3>Стильный градиент</h3>
<div class="modern-marquee"
data-direction="left"
style="--text-size: 40px;
--text-font: 'Verdana', sans-serif;
--anim-speed: 20s;">
<!-- Для градиента используем background-clip -->
<span style="background: linear-gradient(45deg, blue, purple); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
Современный дизайн с градиентом и плавной анимацией.
</span>
</div>
</body>
[/html]
Инструкция
Настройка
1. CSS Переменные (--variable-name):
Вы можете задать параметры прямо в HTML теге style="...".
--text-color: Цвет текста (можно писать red, #000, rgb(...)).
--text-size: Размер шрифта.
--text-font: Название шрифта.
--anim-speed: Скорость (в секундах).
2. Атрибут направления (data-direction):
В HTML добавлен атрибут data-direction="left" или data-direction="right".
Если поставить left — текст едет справа налево.
Если поставить right — текст едет слева направо.
3.Пауза при наведении:
Сохранена функция :hover, чтобы пользователь мог прочитать текст, наведя на него мышку.
Бонус: Как сделать "Бесшовную" строку
Когда текст "уезжает", появляется пустое место, и только потом он появляется снова. Чтобы сделать бесконечную ленту без разрывов (как на новостных сайтах), текст нужно продублировать.
Самый простой современный способ сделать это без сложного JS — просто написать текст дважды внутри тега span:
Примечание: Для идеальной бесшовности (когда текст заканчивается и сразу начинается тот же самый без пробелов) обычно используют JavaScript для клонирования элемента, но дублирование вручную — самый надежный CSS-способ.
Отредактировано Merlin777 (Сегодня 22:32:43)
