Parallax Web Tasarım: CSS ile Uygulama ve Performans Maliyeti

Parallax, arka plan katmanının ön plandan daha yavaş kaymasıyla düz bir sayfada derinlik hissi üretir. Etki basit, uygulaması da öyle görünür; asıl mesele efektin sayfayı ne kadar yavaşlattığı ve kimi rahatsız ettiğidir. Bu iki soru baştan sorulmazsa, masaüstünde şık duran tasarım telefonda takılarak kayan bir sayfaya dönüşür.

Efektin yaptığı iş

Kaydırma sırasında iki katman farklı hızda hareket eder. Göz bu hız farkını uzaklık olarak okur, sayfa da tek düzlem olmaktan çıkar. Tekniğin kökeni 1980'lerin oyun konsollarına dayanıyor: arka plan katmanı ön plandan yavaş kaydırılarak, çok sınırlı donanımla derinlik illüzyonu üretiliyordu.

Uygulama: scroll dinleyicisi yerine CSS

Rehberlerin çoğu hâlâ scroll olayını dinleyip her karede elemanın konumunu güncellemeyi öneriyor. Bu yol iki yerden sızdırır: scroll olayı ana iş parçacığında çalışır, konum okumak da tarayıcıyı layout'u yeniden hesaplamaya zorlar. Aynı efektin tamamen compositor'a bırakılan bir CSS karşılığı var:

.sahne { height: 100vh; overflow-y: auto; perspective: 1px; } .arka { transform: translateZ(-1px) scale(2); } .on { transform: translateZ(0); }

Z ekseninde geriye itilen katman kaydırma sırasında kendiliğinden daha yavaş hareket eder, scale de perspektifin küçülttüğü ölçeği geri verir (translateZ -1px ve perspective 1px için katsayı tam olarak 2'dir). Bir tanıtım sayfasında 60 satırlık scroll dinleyicisini bu üç kuralla değiştirdim, kaydırmadaki takılma tamamen gitti.

Sprite ve raster: web yöntemi değil, donanım tarihi

Parallax anlatılırken dört uygulama yöntemi sıralanır: katmanlı, sprite, tekrarlayan desen, raster. Raster, ekranı satır satır tarayan donanımda her tarama satırında renk register'ını değiştirerek yapılan bir numaraydı; tarayıcıda tarama satırına bağlanabileceğin bir kanca yok. Sprite ise görselleri tek dosyada birleştirme tekniği, hareket üretme yöntemi değil. Web tarafında gerçekten elinde olan iki şey var: katmanları farklı hızda kaydırmak, ve bir görsel dizisini kaydırma konumuna bağlı ilerletmek. Listeyi dörde tamamlamak için eklenen isimler uygulamada seni bir yere götürmüyor.

Kare bütçesi

60 Hz ekranda bir kareye 16,7 ms düşer. JavaScript, stil hesabı, layout, boyama ve katmanların birleştirilmesi bu sürenin içinde bitmek zorunda. Efekti JS ile yazdığında bütçenin büyük kısmını daha ilk adımda harcarsın. background-attachment: fixed kısayolu da ucuz değil: sabit katman her kaydırmada yeniden boyanır, üstelik iOS Safari bu değeri yok sayar ve efekt telefonda tamamen kaybolur.

Hareketi istemeyen kullanıcı

Kaydırmaya bağlı geniş hareketler, vestibüler duyarlılığı olan kullanıcılarda baş dönmesi ve mide bulantısı yaratabiliyor. İşletim sistemlerindeki "hareketi azalt" ayarı tam olarak bunun için var ve tarayıcıya medya sorgusu olarak geliyor:

@media (prefers-reduced-motion: reduce) { .arka, .on { transform: none; } }

WCAG'in 2.3.3 ölçütü de etkileşimle tetiklenen animasyonların kapatılabilmesini istiyor. Üç satırlık bir blok, efekt o kullanıcılarda sessizce devre dışı kalıyor.

Tek sayfa zorunluluğu diye bir şey yok

Parallax'ın SEO'yu zorlaştırdığı sık söylenir. Zorlaştıran parallax değil, ona alışkanlıktan eşlik eden tek sayfa mimarisi: bütün içerik tek URL'de toplanınca ayrı başlık, ayrı açıklama ve site içi bağlantı imkânı kalmıyor. Efekti ayrı sayfalara dağıtıp bölüm başına bir katmanla kullandığında sorun kendiliğinden ortadan kalkar.

Nerede işe yarar

Parallax, tek bir hikâyesi olan ve o hikâyeyi sırayla anlatan sayfalarda çalışır: ürün lansmanı, portfolyo, kampanya sayfası. Kullanıcının bilgiyi tarayarak aradığı yerlerde, yani dokümantasyonda, listeleme ekranlarında, e-ticaret kategorilerinde ters teper; kaydırma yavaşlar, aranan şey geç bulunur. Ölçüt görsel değil davranışsal: sayfada kullanıcı okuyorsa efekt yardım eder, arıyorsa yolunu keser.