JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="marquee">
  <div class="marquee-content">
    <img src="logo1.png" alt="Логотип 1">
    <img src="logo2.png" alt="Логотип 2">
    <img src="logo3.png" alt="Логотип 3">
    <img src="logo4.png" alt="Логотип 4">
    <img src="logo5.png" alt="Логотип 5">
  </div>
  <!-- Дублируем контент для бесшовной анимации -->
  <div class="marquee-content">
    <img src="logo1.png" alt="Логотип 1">
    <img src="logo2.png" alt="Логотип 2">
    <img src="logo3.png" alt="Логотип 3">
    <img src="logo4.png" alt="Логотип 4">
    <img src="logo5.png" alt="Логотип 5">
  </div>
</div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f4;
  margin: 0;
}

.marquee {
  overflow: hidden;
  display: flex;
  width: 100%;
  max-width: 800px;
}

.marquee-content {
  display: flex;
  animation: marquee 15s linear infinite;
}

.marquee-content img {
  height: 60px;
  margin-right: 20px;
  transition: transform 0.3s ease;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

JavaScript

document.querySelector('.marquee').addEventListener('mouseover', function() {
  document.querySelector('.marquee-content').style.animationDuration = '30s';
});

document.querySelector('.marquee').addEventListener('mouseout', function() {
  document.querySelector('.marquee-content').style.animationDuration = '15s';
});