Alleen CSS-eindeloze scrollende carrouselanimatie

Maak een eindeloze scrollende carrouselanimatie met pauze bij hover alleen met CSS. Geen JavaScript vereist.

Gao

Founder

8/11/2024

Stop met weken verspillen aan gebruikersauthenticatie

Lanceer veilige apps sneller met Logto. Integreer gebruikersauthenticatie in minuten en focus op je kernproduct.

Aan de slag

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! 🚀

Inleiding#

Maak een rij kaarten#

Dupliceer de kaarten#

Animeer de carrousel#

Slotgedachten#

Inleiding#

Maak een rij kaarten#

Dupliceer de kaarten#

Animeer de carrousel#

Slotgedachten#

Inleiding

Maak een rij kaarten

Dupliceer de kaarten

Animeer de carrousel

Slotgedachten

Inleiding

Maak een rij kaarten

Dupliceer de kaarten

Animeer de carrousel

Slotgedachten