бесконечная карусель с шатером

Это анимация бесконечной прокрутки, которая часто используется для циклического отображения списка логотипов компаний-партнеров.

Предварительный просмотр

Варианты использования и возможности

• Связи с общественностью: покажите свою надежность, непрерывно отображая список логотипов компаний-спонсоров и партнеров.
• Визуальная живость: прокручивайте информацию о кампании и новую информацию в тексте, чтобы привлечь внимание пользователя.
• Бесконечный цикл: дублируйте и позиционируйте контент, а также плавно зацикливайте его с помощью CSS-анимации, создавая иллюзию вечной прокрутки.

##Ключевые моменты дизайна и UX (Design&UX)

• Плавная прокрутка. Благодаря использованию CSS-анимации прокрутка становится более плавной и более производительной, чем в JavaScript.
• Пауза при наведении: если пользователь хочет поближе рассмотреть контент, анимация приостанавливается при наведении курсора мыши («animation-play-state: пауза»).

Как настроить (Руководство по настройке)

• Регулировка скорости: вы можете изменить скорость прокрутки, увеличив или уменьшив 20s в CSS animation: Marquee 20s Linear Infinite;.
• Изменить содержимое: вы можете свободно менять логотип и текстовые элементы.Убедитесь, что содержимое двух наборов (оригинала и дубликата) одинаково.

Код реализации (Реализация)

<div class="w-full overflow-hidden bg-white dark:bg-zinc-950 py-10">
<style>
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
  .animate-marquee:hover {
    animation-play-state: paused;
  }
</style>
<div class="flex w-[200%] animate-marquee gap-8 items-center">
  <!-- First set -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
  <!-- Duplicate set for infinite effect -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
</div>
</div>