Как сделать бегущую строку, которая будет отображать текст и изображения?

Question

Дик

css , html , javascript

Как сделать бегущую строку, которая будет отображать текст и изображения?

Как создать бегущую строку с крупными буквами и изображениями между словами, размер которых соответствует шрифту? В интернете много примеров, но при попытке модификации кода я столкнулся с проблемами: блоки обрезаются из-за свойства overflow: hidden, или весь блок не проезжает. Вот пример неработающего кода: <a href="https://jsfiddle.net/dzt5hL19/9/" rel="nofollow">https://jsfiddle.net/dzt5hL19/9/</a>

15 сентября 2024 г. 9:43

Ответы на вопрос 1

Похожие вопросы

Answer 1

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

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Бегущая строка</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            background-color: #282c34;
            color: white;
            font-size: 36px; /* Размер шрифта текста */
        }
        .marquee {
            display: inline-block;
            padding-left: 100%; /* Начинаем показ с правого края */
            animation: marquee-animation 10s linear infinite; /* Скорость и бесконечное движение */
        }
        @keyframes marquee-animation {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(-100%, 0); /* Ранее заданная ширина блока */
            }
        }
        .image {
            width: 36px; /* Размер изображения должен соответствовать размеру шрифта */
            height: 36px; /* Соответственно, высота также должна совпадать */
            vertical-align: middle; /* Выравниваем изображение по центру строки */
            margin: 0 10px; /* Отступы для изображения */
        }
    </style>
</head>
<body>

<div class="marquee-container">
    <div class="marquee">
        Привет, <img src="https://via.placeholder.com/36" alt="icon" class="image"> как ваши дела? 
        <img src="https://via.placeholder.com/36" alt="icon" class="image"> Удачного дня!
    </div>
</div>

</body>
</html>
```

### Объяснение кода:

1. **HTML**:
   - Создается контейнер с классом `marquee-container`, в котором находится бегущая строка с классом `marquee`. Здесь размещаются текст и изображения.

2. **CSS**:
   - `overflow: hidden;` убирает все, что выходит за границы контейнера, позволяя тексту "бежать" за его пределами.
   - `white-space: nowrap;` предотвращает перенос строк.
   - `animation: marquee-animation 10s linear infinite;` отвечает за движение текста. Вы можете изменить продолжительность (10s) для изменения скорости.
   - В `@keyframes` определено, что текст сдвигается на 100% влево.
   - Размер изображения будет соответствовать размеру текста.

3. **Изображения**:
   - Замените URL в атрибуте `src` на свои изображения.

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