Web sayfasındaki metin satırları CSS animasyon zeminine dönüşüyor
Öne çıkanlar
- Her metin satırı animasyondaki karakterler için bağımsız bir zemin işlevi görüyor.
- Karakterlerin boyu satır aralığından uzun tutulduğu için metinler yürümeyi engellemiyor.
- Butonlar, görseller, kenarlıklar ve kutular karakterler için fiziksel engel oluşturuyor.
- Sayfanın altındaki uzun zemin boşluğa düşen tüm karakterleri topluyor.
Geliştirici Mark, web sayfası düzenindeki metin satırlarını ve arayüz elemanlarını fiziksel platformlara dönüştüren Lemmings temalı bir CSS animasyon deneyi hazırladı. Sayfa boyutu değiştikçe metin sütunlarının yeniden akmasını temel alan bu çalışma, klasik Lemmings oyunundaki yürüyen karakterlerin metin satırları üzerinde gezinmesini ve satır sonlarından aşağı düşmesini sağlıyor.
Sistemde her metin satırı karakterler için ayrı bir zemin işlevi görüyor. Satırların birbirine olan mesafesi yürüyen karakterlerin boyundan daha kısa tutulduğu için metin karakterleri engellemiyor ve figürler iki satır arasına sıkışmıyor. Karakterlerin hareketini sadece kenarlıklar, kutular, butonlar, görseller ve form alanları gibi somut arayüz bileşenleri kesintiye uğratabiliyor.
Kısa satırların sonundan boşluğa düşen karakterler hemen altlarında yer alan bir sonraki satıra ya da arayüz öğesine iniyor. Sayfanın en alt kısmında konumlandırılan uzun bir zemin ise yukarıdan tamamen aşağı düşen tüm karakterleri toplayarak döngünün web sayfası boyunca kesintisiz şekilde devam etmesini sağlıyor.
Bu özet yapay zekâ ile hazırlanmıştır; ayrıntılar ve doğrulama için orijinal kaynağa başvurun.