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

Question

Севастьян

css

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

У меня есть задача: необходимо создать бесконечно движущуюся строку логотипов, которая будет горизонтально перемещаться по всей странице, адаптируясь к любому размеру экрана. Логотипы представлены в формате SVG. Я хотел бы, чтобы движение этих логотипов имело волнообразный характер, а не прямолинейный. <br/> Как можно реализовать эту идею? <br/> Вот скриншот из Фигмы для наглядности. <br/>

27 декабря 2024 г. 10:13

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

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

Answer 1

Создание бесконечно движущейся волнообразной строки логотипов можно реализовать с помощью HTML, CSS и JavaScript (или только CSS). Учитывая ваши требования, мы можем использовать CSS-анимации для создания такого эффекта. Давайте рассмотрим пример.

### Шаг 1: HTML-разметка

Создайте простой HTML-файл:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Волнообразная строка логотипов</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="wave-container">
        <div class="wave">
            <img src="logo1.svg" alt="Логотип 1">
            <img src="logo2.svg" alt="Логотип 2">
            <img src="logo3.svg" alt="Логотип 3">
            <img src="logo4.svg" alt="Логотип 4">
            <!-- Добавьте столько логотипов, сколько необходимо -->
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
```

### Шаг 2: CSS-стилизация

Создайте файл `styles.css` и добавьте следующий код:

```css
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow: hidden;
}

.wave-container {
    position: relative;
    width: 100%;
    height: 100px; /* Высота волны */
    overflow: hidden;
}

.wave {
    display: flex;
    align-items: center;
    animation: wave-animation 10s linear infinite;
}

.wave img {
    width: 80px; /* Ширина логотипа */
    margin: 0 10px; /* Отступы между логотипами */
}

@keyframes wave-animation {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
```

### Шаг 3: JavaScript (по желанию)

Если вы хотите добавить динамический волнообразный эффект, который меняет положение логотипов, можно использовать JavaScript. Вот простая реализация, которая добавляет эффект «волн»:

```javascript
const wave = document.querySelector('.wave');

const logos = wave.children;
const amplitude = 20; // Амплитуда волны

setInterval(() => {
    Array.from(logos).forEach((logo, index) => {
        const waveOffset = Math.sin((index + Date.now() / 500) / 2) * amplitude;
        logo.style.transform = `translateY(${waveOffset}px)`;
    });
}, 50);
```

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

1. **HTML:** Создаем контейнер для логотипов и добавляем сами логотипы в формате SVG.
2. **CSS:** 
   - Контейнер `.wave-container` ограничивает видимость логотипов и создает эффект волны.
   - `.wave` становится линией логотипов, которая анимируется влево с помощью ключевых кадров `@keyframes`.
3. **JavaScript:** Используем интервал, чтобы периодически изменять положение логотипов по оси Y, создавая эффект волны.

### Результат

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