Yalnızca CSS ile Sonsuz Kaydırılan Karusel Animasyonu

Giriş#

Elbette JavaScript'i seviyoruz. Ancak yalnızca CSS ile neler başarabileceğimizi görmek her zaman eğlencelidir - özellikle de animasyonlar söz konusu olduğunda, çünkü CSS animasyonları genellikle JavaScript animasyonlarından "daha hafif" olur.

Bu yazıda, yalnızca CSS kullanarak fare üzerine geldiğinizde duraklama etkisi olan sonsuz bir kaydırma karusel animasyonu nasıl oluşturacağınızı göstereceğim. İşte inşa edeceğimiz şeyin önizlemesi:

Kart sırası oluşturun#

Öncelikle, karuselimizin temel yapısını oluşturalım. Bir kart sırası düşünün:

Güzel görünüyor, değil mi? Kartlar, karuselinizde sergilemek istediğiniz şık afişleriniz, ürün resimleriniz veya başka herhangi bir şey olabilir.

Kartları çoğaltın#

Sonsuz bir karusel istediğimizden, uçtan uca bağlı olmalıdır. İçgüdüsel olarak, kartları tekrarlamayı deneyebiliriz:

Sonucu kontrol edin:

Yalnızca ilk kart seti görünür. HTML'yi kontrol ederseniz, ikinci kart setinin gizli olduğunu ve ilk sette bulunduğunu göreceksiniz.

Karuseli animasyonlu hale getirin#

Karuseli animasyonlu hale getirme zamanı! İki kart setimiz bağlı olduğundan, kart gruplarını dönüştürerek karuseli animasyonlu hale getirebiliriz. İşte böyle yapılır:

Son olarak eklememiz gereken bir dokunuş daha var: fare karusel üzerine geldiğinde animasyonu duraklatma. Bu, kullanıcıların içeriği daha net görmesine olanak tanır. İki kart setimiz olduğundan, karusel üzerine geldiğinde her iki grubu da duraklatmamız gerekiyor:

Hepsi bu kadar! 🎊 Şimdi karuselin üzerine geldiğinizde duracak.

Son düşünceler#

CSS güçludur ve onunla neler başarabileceğimizi keşfetmek her zaman eğlencelidir. Ayrıca scroll-snap-type ve scroll-snap-align gibi interaktif bir karusel oluşturmanıza yardımcı olabilecek diğer CSS özellikleri de vardır. İyi kodlamalar! 🚀