Alleen CSS-eindeloze scrollende carrouselanimatie

Inleiding#

We houden natuurlijk van JavaScript. Maar het is altijd leuk om te zien wat we alleen met CSS kunnen bereiken - vooral als het om animaties gaat, omdat CSS-animaties vaak "minder zwaar" zijn dan JavaScript-animaties.

In dit artikel laat ik je zien hoe je een eindeloze scrollende carrouselanimatie kunt maken met pauze bij hover-effect, alleen met CSS. Hier is een voorbeeld van wat we gaan bouwen:

Maak een rij kaarten#

Laten we eerst de basisstructuur van onze carrousel maken. Beschouw een rij kaarten:

Ziet er goed uit, toch? De kaarten kunnen je leuke banners zijn, productafbeeldingen, of alles wat je in je carrousel wilt laten zien.

Dupliceer de kaarten#

Omdat we willen dat de carrousel eindeloos is, moet deze eind-voor-eind verbonden zijn. Instinctief kunnen we proberen de kaarten te herhalen:

Bekijk het resultaat:

Alleen de eerste reeks kaarten is zichtbaar. Als je de HTML controleert, zie je dat de tweede set kaarten verborgen is en de eerste volgt.

Animeer de carrousel#

Tijd om de carrousel te animeren! Aangezien we twee sets kaarten hebben die verbonden zijn, kunnen we de carrousel animeren door de kaartgroepen te transformeren. Zo doe je dat:

We hebben nog één laatste touch toe te voegen: de animatie pauzeren bij het zweven boven de carrousel. Dit geeft gebruikers de kans om de inhoud duidelijker te zien. Aangezien we twee sets kaarten hebben, moeten we beide groepen pauzeren als we over de carrousel zweven:

Dat is het! 🎊 Nu zal de carrousel pauzeren als je er met de muis overheen zweeft.

Slotgedachten#

CSS is krachtig en het is altijd leuk om te verkennen wat we ermee kunnen bereiken. Er zijn ook andere CSS-eigenschappen zoals scroll-snap-type en scroll-snap-align die je kunnen helpen een interactieve carrousel te maken. Veel plezier met coderen! 🚀