Parallax Kaydırma Nerede Bozulur: Konum, Hız ve Hareket Duyarlılığı
Parallax kaydırma, hakkında konuşurken iki ayrı şeyi aynı isimle andığımız tekniklerden biri. Katmanların farklı hızlarda kayması başlı başına bir sorun değil; sorun, o efekti kurmak için kaydırmanın kontrolünün kullanıcıdan alınması. Bu ikisini ayırmadan parallax'ın faydalı mı zararlı mı olduğunu tartışmak pek bir yere varmıyor.
Sorun hareket değil, kaydırmanın ele geçirilmesi
Bir efekt kaydırma konumuna bağlıysa kullanıcı geri kaydırdığında animasyon aynen geri sarar. Parmağın durduğu yerde sayfa durur, kaydırma çubuğu nerede olunduğunu söyler, hiçbir şey kaybolmaz. Buraya kadar itiraz edilecek bir taraf yok.
Kaydırma ivmesine bağlı kurgular başka bir şey. Smooth-scroll kütüphaneleriyle araya giren, hedefe yumuşayarak yaklaşan sayfalarda kullanıcı 300 piksel kaydırır, sayfa 460 piksel gider, sonra geriye yaylanır. Kullanıcının kafasındaki model ile ekranda olan biten arasındaki bağ orada kopuyor. Peki bu gerçekten bir tercih meselesi mi? Kaydırma tarayıcının en temel, en çok öğrenilmiş etkileşimi; onu yeniden yazan bir sayfanın kazancının bu kadar büyük olması gerekir ve neredeyse hiç olmuyor.
Sık verilen "efekt kaydırma hızına aşırı bağlı olmasın" tavsiyesi doğru şeyi hedefliyor ama yanlış yerden tutuyor. Parallax tanımı gereği kaydırmaya bağlıdır. Bağlanmaması gereken şey hız değil, ivme ve gecikme.
Hareketi kim kapatabiliyor?
Aşırı hareketin bazı kullanıcılarda baş dönmesi ve mide bulantısı yarattığı sıkça yazılıyor, ama iş çoğu zaman uyarıda kalıyor. Oysa bunun işletim sistemi düzeyinde bir karşılığı var ve tarayıcıya kadar geliyor: kullanıcı sistem ayarlarından hareketi azaltmayı seçtiğinde sayfanız bunu okuyabilir.
@media (prefers-reduced-motion: reduce) { .parallax-layer { transform: none; transition: none; } }WCAG 2.1'in 2.3.3 numaralı ölçütü (Animation from Interactions) etkileşimle tetiklenen animasyonların kapatılabilir olmasını istiyor. AAA seviyesinde olduğu için çoğu proje kendini muaf sayıyor, oysa karşılığı yukarıdaki üç satır. Vestibüler duyarlılığı olan bir kullanıcının sayfadan çıkmasının maliyetiyle kıyaslandığında bu, tartışılacak bir yatırım değil.
Faturayı kim ödüyor
Parallax'ın performans maliyeti çoğunlukla animasyonun kendisinden değil, nasıl kurulduğundan geliyor. background-attachment: fixed her kaydırma karesinde yeniden boyama tetikler ve bunu ana iş parçacığında yapar. Aynı efekti transform: translate3d() ile kurduğunuzda iş kompozitöre geçer, sayfa akıcılaşır. Daha yenisi de var: CSS'in animation-timeline: scroll() desteğiyle kaydırmaya bağlı animasyonlar JavaScript'te scroll dinleyicisi tutmadan çalışabiliyor.
Bir tanıtım sayfasında hero bölümündeki parallax katmanını kaldırdığımızda ilk boyanma süresi belirgin biçimde düzelmişti, ama düzelten şey animasyonun kalkması değil, onu beklerken yüklenen devasa arka plan görselinin de birlikte gitmesiydi. Ölçmeden suçlu aramak genelde yanlış yere götürüyor: tarayıcının performans panelinde uzun karelerin nereden geldiğine bakmak, efekti tümden savunmaktan da tümden reddetmekten de hızlı sonuç veriyor.
Hangi sayfada işe yarıyor
Kullanıcının bir işi bitirmeye geldiği sayfalarda parallax'ın yeri yok. Ürün karşılaştırması, başvuru formu, doküman okuma; buralarda hareket eden her katman aranan bilgiye giden yolu uzatıyor. Bir de ilginç bir yan etki var: kullanıcılar hareketli, tam genişlikte bölümleri reklam sanıp atlıyor. Banner körlüğü, parallax hero'ları da vuruyor.
İş amacı gezinmek değil de izlenim bırakmaksa, yani portföy, marka hikayesi, kısa tanıtım sayfası, o zaman soru değişiyor. Orada ziyaretçi zaten kaydırarak keşfetmeye geliyor ve katmanlı geçiş anlatıyı taşıyabiliyor. Ölçüt basit: sayfada bir sonraki adımı tarif eden bir eylem varsa, efekt o eylemin önüne geçmemeli.
Mobilde durum neden farklı
Mobil tarayıcıların momentum kaydırması, parmak kalktıktan sonra da sayfayı sürüklemeye devam eder ve bu, konuma bağlı animasyonların bile ritmini bozar. Üstüne adres çubuğunun kaybolup geri gelmesi viewport yüksekliğini anlık değiştirir; 100vh'ye dayanan parallax bölümleri o anda zıplar. Peki bu, mobilde efekti tamamen kapatmayı mı gerektirir? Çoğu zaman evet, ama daha ucuz bir orta yol var: katmanları koruyup hız farkını belirgin biçimde azaltmak, hareketi hissettirip baş döndürmüyor.