Animacja karuzeli z nieskończonym przewijaniem tylko za pomocą CSS

Wprowadzenie#

Oczywiście kochamy JavaScript. Ale zawsze przyjemnie jest zobaczyć, co możemy osiągnąć jedynie za pomocą CSS - szczególnie w przypadku animacji, ponieważ animacje CSS są często „lżejsze” niż animacje JavaScript.

W tym poście pokażę Ci, jak stworzyć animację karuzeli z nieskończonym przewijaniem oraz efektem zatrzymania po najechaniu kursorem używając tylko CSS. Oto podgląd tego, co będziemy budować:

Stwórz rząd kart#

Najpierw stwórzmy podstawową strukturę naszej karuzeli. Rozważmy rząd kart:

Wygląda dobrze, prawda? Karty mogą być Twoimi eleganckimi banerami, zdjęciami produktów lub czymkolwiek, co chcesz zaprezentować w swojej karuzeli.

Duplikowanie kart#

Ponieważ chcemy, aby karuzela była nieskończona, powinna być połączona końcem z końcem. Instynktownie możemy spróbować powtórzyć karty:

Sprawdź wynik:

Widoczny jest tylko pierwszy zestaw kart. Jeśli sprawdzisz HTML, zobaczysz, że drugi zestaw kart jest ukryty i podąża za pierwszym zestawem.

Animowanie karuzeli#

Czas na animację karuzeli! Skoro mamy dwa zestawy kart połączone ze sobą, możemy animować karuzelę, transformując grupy kart. Oto jak:

Pozostał nam jeszcze jeden ostatni akcent: zatrzymanie animacji podczas najeżdżania kursorem na karuzelę. Pozwoli to użytkownikom bardziej wyraźnie zobaczyć zawartość. Ponieważ mamy dwa zestawy kart, musimy zatrzymać obie grupy, gdy najeżdżamy kursorem na karuzelę:

To wszystko! 🎊 Teraz karuzela zatrzyma się, gdy na nią najedziesz.

Ostateczne przemyślenia#

CSS jest potężny i zawsze warto badać, co możemy dzięki niemu osiągnąć. Istnieją także inne właściwości CSS, takie jak scroll-snap-type i scroll-snap-align, które mogą pomóc w stworzeniu interaktywnej karuzeli. Szczęśliwego kodowania! 🚀