Twórz animację karuzeli z nieskończonym przewijaniem oraz zatrzymaniem po najechaniu kursorem, korzystając tylko z CSS. Nie jest wymagany JavaScript.
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ć:
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.
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.
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.
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! 🚀