Бесконечная анимация карусели с прокруткой на CSS

Введение#

Мы, конечно, любим JavaScript. Но всегда приятно посмотреть, чего можно добиться, используя только CSS - особенно в случае с анимациями, так как CSS-анимации часто "менее тяжёлые", чем анимации на JavaScript.

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

Создайте ряд карт#

Сначала давайте создадим базовую структуру нашей карусели. Рассмотрим ряд карт:

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

Дублирование карт#

Поскольку мы хотим, чтобы карусель была бесконечной, она должна быть соединена от конца к началу. Интуитивно мы можем попытаться повторить карты:

Посмотрите на результат:

Только первый набор карт виден. Если вы посмотрите на HTML, то увидите, что второй набор карт скрыт и следует за первым набором.

Анимация карусели#

Время анимировать карусель! Поскольку у нас есть два набора соединённых карт, мы можем анимировать карусель, трансформируя группы карт. Вот как:

У нас остался последний штрих: остановка анимации при наведении на карусель. Это даст пользователям возможность более чётко разглядеть контент. Поскольку у нас есть два набора карт, нам нужно приостановить обе группы при наведении на карусель:

Вот и всё! 🎊 Теперь карусель будет останавливаться, когда ты наведёшь на неё курсор.

Заключительные мысли#

CSS мощный, и всегда приятно исследовать, чего мы можем с его помощью добиться. Есть также другие CSS-свойства, такие как scroll-snap-type и scroll-snap-align, которые могут помочь вам создать интерактивную карусель. Приятного кодинга! 🚀