Modern CSS ile iki boyutlu ızgaralarda yakınlık odaklı gezinme efektleri oluşturuluyor
Öne çıkanlar
- İki boyutlu ızgaralarda komşu öğeleri seçmek için CSS matematik fonksiyonlarıyla koordinat sistemi kuruluyor.
- Fareyle odaklanılan öğenin konumunu belirlemek için CSS kaydırma odaklı animasyonları ve `view-timeline` kullanılıyor.
- Kapsayıcı sorguları sayesinde ızgara düzeni ekran boyutuna göre dinamik şekilde uyum sağlıyor.
Geliştiriciler, JavaScript kullanmadan yalnızca modern CSS yetenekleriyle iki boyutlu ızgaralarda fare ile üzerine gelme (hover) etkileşimleri tasarlayabiliyor. Klasik yöntemlerde tek boyutlu dizilimler için :has() ve ardışık kardeş seçicileri (+) yeterli olurken, iki boyutlu ve duyarlı (responsive) ızgaralarda her öğenin komşularını seçmek dinamik karmaşıklıklar barındırıyor.
Yayımlanan teknik rehber, ızgara içerisindeki öğelerin koordinatlarını CSS kapsayıcı sorguları ve sibling-index() gibi matematiksel işlevlerle hesaplamayı temel alıyor. Kapsayıcı genişliği ve eleman boyutlarından hareketle sütun ve satır sayıları saptanıyor, ardından her öğeye sabit bir satır ve sütun indeksi atanıyor.
Üzerine gelinen öğenin koordinatlarının tespiti için ise kaydırma odaklı animasyonlar (scroll-driven animations) ve view-timeline özelliklerinden yararlanılıyor. Bu yöntem sayesinde öğenin konumu bir animasyon ilerleme değeri olarak okunarak tüm ızgarayla paylaşılabiliyor ve komşu elemanlar üzerinde mesafe bazlı ölçekleme yapılabiliyor.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.