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

Question

Петр

react , css

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

Добрый день! <br/> Я работаю над созданием слайдера и нашел несколько примеров в интернете, которые адаптировал под свои нужды. У меня возникли два вопроса, по которым я не смог найти решение. <br/> 1. Как сделать так, чтобы бегущая строка была полностью бесконечной? В настоящее время в конце 40 секунд наблюдается заметный пробел. <br/> 2. Мне нужно, чтобы первый элемент строки был немного больше остальных. При уходе этого элемента с поля видимости анимация увеличения стилей должна плавно исчезать, и он возвращается к обычному размеру. Вместо него второй элемент, который становится на его место, должен получить эти стили. Можно ли это реализовать с помощью чистого CSS? <br/> <br/> Вот пример кода: <a href="https://codepen.io/pen?template=MWNKPEQ" rel="nofollow">https://codepen.io/pen?template=MWNKPEQ</a> <br/> В будущем я планирую интегрировать этот слайдер в проект на Next.js.

2 октября 2024 г. 12:14

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

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

Answer 1

Создание бесконечной бегущей строки с анимацией элементов внутри может быть реализовано с использованием CSS и JavaScript. Вот вдохновение для решения вашего вопроса:

### 1. Бесконечная бегущая строка

Чтобы добиться эффекта бесконечной бегущей строки, можно дублировать содержимое строки. Это позволит избежать "пробелов" в конце анимации. Разделим строку на два контейнера, которые будут двигаться параллельно.

### 2. Увеличение первого элемента

Для анимации изменения размера элемента при его уходе из видимости можно использовать CSS с помощью keyframes и соответствующих классов 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 {
            font-family: Arial, sans-serif;
            overflow: hidden;
            background-color: #f0f0f0;
        }
        
        .marquee {
            display: flex;
            white-space: nowrap;
            animation: scroll 10s linear infinite;
        }

        .marquee-container {
            display: flex;
            animation: scroll 10s linear infinite;
        }

        .marquee-item {
            padding: 10px;
            transition: transform 0.5s;
        }

        .large {
            transform: scale(1.5);
            color: red;
        }

        @keyframes scroll {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(-100%);
            }
        }

        .marquee-wrapper {
            overflow: hidden;
            height: 50px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="marquee-wrapper">
        <div class="marquee-container">
            <div class="marquee" id="marquee">
                <div class="marquee-item large" id="first-item">Первый элемент</div>
                <div class="marquee-item">Второй элемент</div>
                <div class="marquee-item">Третий элемент</div>
                <div class="marquee-item">Четвертый элемент</div>
                <div class="marquee-item">Пятый элемент</div>
            </div>
            <div class="marquee">
                <div class="marquee-item large" id="first-item-copy">Первый элемент</div>
                <div class="marquee-item">Второй элемент</div>
                <div class="marquee-item">Третий элемент</div>
                <div class="marquee-item">Четвертый элемент</div>
                <div class="marquee-item">Пятый элемент</div>
            </div>
        </div>
    </div>

    <script>
        const firstItem = document.getElementById('first-item');
        const firstItemCopy = document.getElementById('first-item-copy');

        const animationDuration = 10000; // Длительность анимации в миллисекундах

        setInterval(() => {
            firstItem.classList.remove('large');
            firstItemCopy.classList.add('large');

            setTimeout(() => {
                firstItem.classList.add('large');
                firstItemCopy.classList.remove('large');
            }, animationDuration - 500); // Увеличение происходит за 9.5 секунды
        }, animationDuration);
    </script>
</body>
</html>
```

### Пояснения:
1. **Структура**:
   - Используем `flexbox` для расположения элементов внутри `.marquee` и `.marquee-container`.
   - Каждый элемент имеет класс `marquee-item`. Первый элемент имеет дополнительно класс `large` для увеличения при нахождении в видимой области.

2. **Анимация**:
   - Используется CSS-анимация с `keyframes` для плавного перемещения строки.
   - Дублируем `.marquee`, чтобы добиться эффекта бесконечности.

3. **JavaScript**:
   - С помощью `setInterval` мы переключаем классы между элементами для работы с анимацией изменения размера. 

Таким образом, вы получите бесконечную бегущую строку, которая плавно анимирует элементы. Вы можете дополнительно настроить скорости, размеры и стили по вашему желанию.