Scroll Fading Nasıl Kurulur: Süre, Varsayılan Durum, Erişilebilirlik
Scroll fading, bir öğenin görüş alanına girdiğinde yavaşça belirmesi. Fikir basit ama uygulama iki yerde tökezliyor: geçiş fazla uzun tutuluyor, bir de öğenin animasyon öncesi varsayılan hali görünmez bırakılıyor. İkisi de tasarım tercihi değil, kurulum hatası.
Solma efekti sayfayı hızlandırmaz
Scroll fading'e atfedilen en yaygın fayda yanlış: "içerik görünür olduğunda yüklenir, o yüzden site hızlanır". Yüklemeyi geciktiren şey animasyon değil, tembel yükleme. Görsele loading="lazy" koyarsan ya da isteği IntersectionObserver içinde başlatırsan kazanç oradan gelir, solma efekti hiç olmadan da gelir. İkisi sık sık aynı dosyada durduğu için birbirine karışıyor.
Efektin kendi maliyeti nasıl yazdığına bağlı. opacity ve transform üzerinden kurulan geçiş kompozisyon katmanında çalışır, ucuzdur. Aynı görünümü top, height ya da filter ile elde etmeye kalkarsan her karede yeniden yerleşim veya boyama tetiklersin; uzun listelerde bu fark orta segment bir telefonda hissedilir.
Öğenin animasyon öncesi hali
Asıl risk burada. Tipik kurulum CSS'e .fade{opacity:0} yazmak, sonra JavaScript'in .visible sınıfını eklemesini beklemek. Paket yüklenmezse, bir hata betiği yarıda durdurursa ya da gözlemci hiç tetiklenmezse sayfa boş kalır. İçerik DOM'da durur, kullanıcı hiçbir şey göremez.
Gizleme kararını JavaScript'in kendisi versin. Betik çalışıyorsa animasyonu da çalıştırabilecek demektir:
document.documentElement.classList.add('js'); const gozlemci = new IntersectionObserver((girisler, g) => { for (const giris of girisler) { if (!giris.isIntersecting) continue; giris.target.classList.add('gorunur'); g.unobserve(giris.target); } }, { rootMargin: '0px 0px -10%' }); document.querySelectorAll('.solarak-gel') .forEach(el => gozlemci.observe(el));CSS tarafı üç kuraldan ibaret:
.solarak-gel { transition: opacity .2s ease-out, transform .2s ease-out; } .js .solarak-gel { opacity: 0; transform: translateY(12px); } .js .solarak-gel.gorunur { opacity: 1; transform: none; }Toplamı on beş satır, animasyon kütüphanesi kurmana gerek yok. unobserve çağrısı da ikinci faydayı bedavaya getiriyor: kullanıcı yukarı döndüğünde öğe tekrar kaybolup gelmez.
400 ms'den uzun her geçiş geç kalır
Bu sayı hoş bir üst sınır değil, kaydırma hızının sonucu. Telefonda tek bir savurma hareketi saniyede bin ile iki bin piksel arası yol aldırır. 500 ms süren bir geçişte öğe, tam opaklığa ulaşana kadar 500 ila 1000 piksel taşınmış olur, yani aşağı yukarı bir ekran boyu. Kullanıcı okumaya başladığında yazı hâlâ yarı saydamdır ya da çoktan üst kenardan çıkmıştır.
150 ile 250 ms arası iyi çalışıyor. Gözlemciyi de öğe alt kenarı tam geçtiğinde değil, biraz öncesinde tetikle; yukarıdaki rootMargin değeri bunu yapıyor, animasyon okuma alanına girmeden bitiyor.
Scrolljacking ile aynı şey değil
Scroll fading kaydırma olayını dinler, sonucuna karışmaz: parmağını ne kadar kaydırırsan sayfa o kadar iner. Scrolljacking kaydırmanın hızını veya varış noktasını devralır, sayfayı bölüm bölüm zıplatır. Birincisi bir sunum tercihi, ikincisi kullanıcının girdisini yeniden yorumlamak.
Kurumsal tanıtım sayfalarında hâlâ görülüyor, savunulabilir bir tarafı yok. Kaydırma çubuğunun konumu gerçek konumu göstermez hale gelir, Page Down ve ekran okuyucu ile gezinme kırılır, bir de kullanıcı sayfanın ne kadarını geride bıraktığını kestiremez.
Hareketi kapatmış kullanıcı
prefers-reduced-motion işletim sistemi ayarından gelir ve vestibüler rahatsızlığı olan kullanıcılar bunu gerçekten açıyor. Sorgusu üç satır:
@media (prefers-reduced-motion: reduce) { .js .solarak-gel { opacity: 1; transform: none; transition: none; } }Dikkat edilecek yer, geri dönüşün yönü. Hareketi kapatan kullanıcı içeriği anında görünür almalı, anında gizli değil. Bu kuralı atlayan kurulumlarda ayarı açan kişi sayfanın yarısını hiç göremiyor.
Nerede işe yarıyor, nerede yaramıyor
Uzun ve bölümlü sayfalarda, her bölümün girişine konan tek bir hafif geçiş gözü sıradaki başlığa taşır. Anahtar kelime: tek. Aynı ekranda başlık, görsel ve buton sırayla belirmeye başladığında efekt içeriğe değil kendine dikkat çeker.
Çalışmadığı yer de belli. Sayfa açılır açılmaz görünür alanda duran içeriği soldurma, ilk boyamayı gereksiz yere geciktirmiş olursun. Bir de sayaç animasyonları var: sabit bir rakamı yavaşça saydırıp "veriler anlık güncelleniyor" izlenimi vermek, tasarım değil yanlış beyan. Güven o yolla kurulmuyor.