Kaydırma Efektleri ve Parallax: Nerede Tutar, Nerede Yavaşlatır
Parallax çoğu sitede süs, birkaç sitede işlev. Farkı efektin kendisi değil, sayfanın ne anlatmak istediği ve tarayıcıya kaç kare kaybettirdiği belirler. Kaydırma teknikleri birbirinin yerine de geçmez; her biri belirli bir içerik tipinde tutar, geri kalanında yalnızca gecikme üretir.
Kaydırma önce gezinmedir
Ziyaretçi sayfayı aşağı çekerken bir şey arıyor. Efekt bu aramayı hızlandırıyorsa iyi tasarımdır, yavaşlatıyorsa maliyettir. Tekniklerin hangisinin nerede tuttuğu da bu ölçüye göre belli olur.
- Dikey kaydırma: Varsayılan. Metin ağırlıklı her sayfada bunu bozmaya çalışmak zarar verir.
- Yatay kaydırma: Portföy, katalog, görsel dizi. Bir de gerçek bir zaman çizelgesi varsa. Bunun dışında kullanıcıyı kaybolmuş hissettirir.
- Sonsuz kaydırma: Akış tipi içerikte, yani sonu olmayan ve tek tek adreslenmesi gerekmeyen listelerde. Blog arşivi bu tarife uymaz.
- Parallax: Anlatının katmanı varsa. Ürün hikayesi, süreç anlatımı, öncesi ve sonrası. Kurumsal ana sayfaya dekor olarak konduğunda hiçbir şey anlatmaz.
Parallax'in gerçek maliyeti kare bütçesidir
60 fps hedefliyorsanız kare başına 16 milisaniyeniz var, üstelik bunun tamamı sizin değil. Parallax'i scroll olayına bağlayıp her tetiklemede getBoundingClientRect okuyup hemen ardından style.top yazarsanız tarayıcıyı aynı karede iki kez layout hesaplamaya zorlarsınız. Efekt masaüstünde sorunsuz görünür, orta seviye bir Android'de kaydırma takılır.
Ucuz olan yol farklı: konumu transform: translate3d() ile değiştirin, katmanı compositor'a bırakın, ölçüm ile yazmayı ayırın. background-attachment: fixed ise özellikle pahalıdır, çünkü kaydırmanın her karesinde arka planı yeniden boyatır; iOS Safari'de zaten uzun süredir güvenilir çalışmıyor.
Ölçmeden karar vermeyin. Chrome DevTools'ta Performance kaydı alıp kaydırma sırasındaki uzun kareleri işaretlemek beş dakika sürer, tahmin yürütmekten daha kısa. Kırmızı üçgen görüyorsanız efekt bitmiştir, tartışacak bir şey kalmaz.
Sonsuz kaydırma SEO'yu iyileştirmez
Kaydırma efektlerinin sayfada geçirilen süreyi artırdığı, bunun da arama sıralamasına yaradığı sık tekrarlanır. İkinci kısım dayanaksız, birincisi ise sonsuz kaydırmada tam ters yönde çalışır.
Sebep basit: her içeriğin bir adresi olmak zorunda. Sonsuz kaydırmada 40. yazı hiçbir URL'de durmuyorsa, o yazıya giden tek yol JavaScript'in doğru anda doğru isteği atması olur. Tarayıcı geri tuşuna basıldığında konum kaybolur, kullanıcı bağlantı paylaşamaz, tarayıcı botu listenin sonuna hiç ulaşmaz. Aynı sorunun ikinci yüzü de altta durur: sayfa sonu sürekli geriye kaçtığı için footer'daki iletişim ve arşiv bağlantıları pratikte tıklanamaz hale gelir.
Çözüm sonsuz kaydırmayı tamamen atmak değil. Arka planda gerçek sayfalanmış adresler (/blog/sayfa/2) bulunsun, listeye "daha fazla yükle" düğmesi koyun, yüklenen her parçada history.pushState ile adresi güncelleyin. Görünüşte akış, altta sayfalama.
Hareketi kapatmak isteyen kullanıcı
Vestibüler duyarlılığı olan bir kullanıcı için katmanlı kaydırma hoş bir detay değil, mide bulandıran bir şey. İşletim sistemi bu tercihi zaten taşıyor, siz yalnızca dinlemekle yükümlüsünüz.
@media (prefers-reduced-motion: reduce) { .parallax { transform: none; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }Bunu üç satırla çözersin, üçüncü parti bir kütüphaneye gerek yok. Aynı özeni klavye kullanıcısına da gösterin: kaydırmaya bağlı olarak beliren içerik, sekme ile odaklandığında görünür olmalı. Ekranda olmayan ama odak alan bir bağlantı, olmayan bağlantıdan daha kötüdür.
Karar kuralı
Efekti eklemeden önce şunu cevaplayın: kaldırdığınızda sayfa bir şey kaybediyor mu? Kaybetmiyorsa zaten dekordur, kare bütçesini ona harcamayın. Kaybediyorsa da mobilde ölçün, hareket tercihini dinleyin, içeriğin adresini koruyun. Bu üçünü sağlayan parallax iyi çalışır; sağlamayanı kimse özlemez.
Kaynaklar