Scroll ile Tetiklenen Metin Animasyonlarının Kırılma Noktaları

Kaydırmayla beliren metinler estetik bir tercih gibi görünür, oysa teknik olarak metnin görünürlüğünü bir betiğin çalışmasına bağlamak demektir. Bu bağ koptuğunda kaybedilen şey efekt değil, içeriğin kendisi olur. Efektin nerede işe yaradığı sorusundan önce, nerede sessizce kırıldığına bakmak gerekiyor.

Gizlenen metin, kaybedilebilen metindir

Bu efektlerin neredeyse tamamı aynı şekilde kurulur: eleman başlangıçta saydamlığı sıfıra çekilerek gizlenir, JavaScript elemanın görünür alana girdiğini fark ettiğinde bir sınıf ekler, metin belirir. Sıradan bir kurulum. Ama görünür olmanın koşulu artık bir betiğin çalışması.

Peki betik çalışmazsa? Ağ yavaşlığı yüzünden geç yüklenen, bir eklenti tarafından engellenen ya da zincirin ortasında hata veren bir JavaScript, metni kalıcı olarak görünmez bırakır. Sayfa boş değildir üstelik: metin belgede durur, tarayıcının sayfa içi araması onu bulur, arama motoru okur, ekran okuyucu okur. Sadece kullanıcı göremez. Bu hata türü test ortamında neredeyse hiç ortaya çıkmaz, çünkü orada betik hep çalışır.

İkinci senaryo daha sık yaşanıyor: kullanıcı sayfaya bir çapa bağlantısıyla ortadan giriyorsa hedef eleman zaten görünür alandadır ve girme olayı hiç tetiklenmez. Kurulum bu durumu ayrıca ele almıyorsa açılışta bakılan bölüm boş kalır.

Kademeli gecikme çabuk birikir

Liste elemanlarını sırayla göstermek yaygın bir efekt, hesabı da basit. On iki maddeye yüz milisaniyelik kademe verirseniz son madde, bölüm ekrana girdikten 1,2 saniye sonra başlar; üstüne dört yüz milisaniyelik geçiş süresi eklenince tamamlanması 1,6 saniyeyi bulur. Kullanıcı o sırada kaydırmaya devam ediyorsa son maddeler ekranın dışında belirir, yani efekti kimse görmez, sadece gecikmesi yaşanır. Kademeyi elli milisaniye civarında tutmak ve altı yedi elemandan sonra kesmek daha isabetli (yüz milisaniyelik kademeleri hemen her sitede fazla buluyorum).

Kapatma düğmesi yazmayın, sistemi dinleyin

Animasyonların kapatılabilir olması gerektiği doğru, ama bunun için siteye özel bir ayar düğmesi koymak sorunu yanlış yerden çözer. Kullanıcı hareket azaltma tercihini işletim sisteminde bir kez ayarlar, tarayıcı da bunu her siteye kendisi söyler.

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; } }

Burada atlanan bir ayrıntı var: eleman saydamlığı sıfırdan başlıyorsa ve siz sadece geçiş sürelerini kısıyorsanız, metni ayrıca görünür duruma getirmeniz gerekir. Yoksa hareket azaltma tercihi olan kullanıcı, tam da onu koruması gereken kuralın yüzünden bomboş bir sayfayla karşılaşır. Erişilebilirlik için yazılan kodun erişilebilirliği bozması, bu efektin en sinsi hâli.

Nereye uygulanır, ne kadarı yeter

Bağlam belirleyici. Finans, sağlık, kamu ya da dokümantasyon gibi kullanıcının belirli bir bilgiyi almaya geldiği sitelerde metin animasyonunun getirisi yok; ziyaretçi okumaya gelmiş, bekletiliyor. Portfolyo, sergi ya da tanıtım sayfası gibi deneyimin kendisi ürün olan yerlerde tolerans yüksek, efekt de gerçekten çalışıyor.

Aradaki yol, efekti ana metinden alıp destekleyici ögelere taşımak: görseller, sayı kartları, ayırıcı bloklar geciktiğinde kimsenin okuması aksamaz. Bir de tekrar meselesi var. Animasyon yalnızca ilk görünmede çalışmalı; peki tekrar ederse ne bozulur? Kullanıcının sayfaya dair kurduğu harita. Az önce okuduğu paragrafa dönmek için yukarı çıkar, paragrafı bulamaz, çünkü paragraf o sırada yeniden solmaktadır. Sayfayı gezilebilir kılan şey, içeriğin bir kere yerleştikten sonra orada durmasıdır.