Создайте анимацию бесконечной прокрутки карусели с паузой при наведении, используя только CSS. JavaScript не требуется.
Мы, конечно, любим JavaScript. Но всегда приятно посмотреть, чего можно добиться, используя только CSS - особенно в случае с анимациями, так как CSS-анимации часто "менее тяжёлые", чем анимации на JavaScript.
В этом посте я покажу вам, как создать анимацию бесконечной прокрутки карусели с эффектом паузы при наведении, используя только CSS. Вот предварительный просмотр того, что мы будем строить:
Сначала давайте создадим базовую структуру нашей карусели. Рассмотрим ряд карт:
Выглядит хорошо, правда? Карты могут быть вашими красивыми баннерами, изображениями продукции или чем угодно, что вы хотите показать в своей карусели.
Поскольку мы хотим, чтобы карусель была бесконечной, она должна быть соединена от конца к началу. Интуитивно мы можем попытаться повторить карты:
Посмотрите на результат:
Только первый набор карт виден. Если вы посмотрите на HTML, то увидите, что второй набор карт скрыт и следует за первым набором.
Время анимировать карусель! Поскольку у нас есть два набора соединённых карт, мы можем анимировать карусель, трансформируя группы карт. Вот как:
У нас остался последний штрих: остановка анимации при наведении на карусель. Это даст пользователям возможность более чётко разглядеть контент. Поскольку у нас есть два набора карт, нам нужно приостановить обе группы при наведении на карусель:
Вот и всё! 🎊 Теперь карусель будет останавливаться, когда ты наведёшь на неё курсор.
CSS мощный, и всегда приятно исследовать, чего мы можем с его помощью добиться. Есть также другие CSS-свойства, такие как scroll-snap-type и scroll-snap-align, которые могут помочь вам создать интерактивную карусель. Приятного кодинга! 🚀