Parallax Efekti Kullanmalı mı? Performans, Mobil ve Erişilebilirlik Riskleri

Parallax efekti, kaydırırken arka plan ile ön plandaki katmanların farklı hızlarda hareket etmesiyle oluşan bir derinlik yanılsamasıdır. Doğru yerde kullanırsanız sayfaya hareket ve karakter katar. Ancak yanlış kurulduğunda sayfayı yavaşlatır, mobilde takılır ve hareket hassasiyeti olan ziyaretçilerde baş dönmesine yol açabilir. Bu rehberde Talha Aslan ve ekibi olarak sahada gördüğümüz kararları adım adım paylaşıyoruz.

Terimin kökü astronomiye dayanır. Yakındaki bir nesne, uzaktakine göre daha hızlı yer değiştiriyor gibi görünür. Web tasarımında da aynı ilkeyi taklit ederiz. Örneğin bir dağ fotoğrafı yavaşça yukarı kayarken önündeki başlık normal hızda ilerler. Böylece göz, ekranda iki ayrı düzlem algılar.

Peki bu etki her siteye uygun mu? Bizim deneyimimize göre hayır. Bir marka hikâyesi anlatan tanıtım sayfasında işe yarayabilir. Buna karşılık ürün listeleyen, fiyat karşılaştıran ya da randevu alan bir sayfada çoğu zaman dikkat dağıtır. Kısacası karar, efektin güzelliğine değil sayfanın görevine göre verilmelidir.

Parallax efekti teknik olarak nasıl çalışır?

Teknik tarafta iki temel yaklaşım görürüz. Birincisi yalnız CSS ile kurulan katmanlı yapıdır. İkincisi kaydırma olayını JavaScript ile dinleyip her karede katmanların konumunu yeniden hesaplayan yöntemdir. İkisinin maliyeti ve riski farklıdır.

• Sabit arka plan yöntemi: Arka plan görselini kaydırmaya bağlı olmadan sabit tutar. Kurulumu kolaydır, ancak bazı mobil tarayıcılarda beklenen şekilde davranmayabilir.
• CSS perspektif yöntemi: Katmanları üç boyutlu bir sahnede farklı derinliklere yerleştirir. Tarayıcı hareketi kendisi hesaplar, bu yüzden genellikle daha akıcıdır.
• JavaScript kaydırma dinleyicisi: Her kaydırma olayında katman konumunu günceller. Esnektir, fakat ana iş parçacığını meşgul ettiği için takılma riski en yüksek yöntemdir.
• Kaydırmaya bağlı animasyon zaman çizelgeleri: Yeni tarayıcı özellikleri, animasyonu doğrudan kaydırma ilerlemesine bağlamanıza izin verir. Destek durumunu resmi tarayıcı belgelerinden kontrol edin.

Hangisini seçerseniz seçin, temel kural aynıdır. Hareketi tarayıcının ucuz hesapladığı özelliklerle yapmalısınız. Bu konuya performans bölümünde ayrıca değineceğiz.

Ziyaretçi parallax hareketini nasıl algılar?

İlk izlenim genellikle olumludur. Hareket göze çarpar ve sayfa "yapılmış, düşünülmüş" hissi verir. Öte yandan bu his, ziyaretçinin bir görevi varsa hızla sabırsızlığa dönüşebilir.

Nielsen Norman Group, parallax kullanılabilirliği üzerine yazısında bu efektin görsel ilgi kattığını, ancak yavaş yüklenen ya da zor okunan içerik gibi kullanılabilirlik sorunları doğurabildiğini anlatır. Aynı kaynak, asıl ölçütün kullanıcının görevini kolay ve hızlı tamamlayıp tamamlamadığı olduğunu vurgular. Bizim sahada gördüğümüz tablo da bununla örtüşür.

Örnek senaryo düşünelim. Bir mobilya markası ana sayfasında beş ayrı parallax bölümü kullanıyor. Ziyaretçi kampanya bilgisine ulaşmak için uzun bir yolculuk yapmak zorunda kalıyor. Sonuç olarak hareket, mesajı taşımak yerine mesajın önüne geçiyor. Ayrıca kaydırma deneyimi genel olarak iyi kurgulanmadıysa efekt bunu kurtarmaz; bu konuyu scroll deneyimi rehberimizde ayrıntılı ele aldık.

Parallax hangi durumlarda gerçekten işe yarar?

Efektin işe yaradığı senaryolar sınırlıdır ama gerçektir. Ortak noktaları şudur: ziyaretçi o sayfaya bir duygu ya da hikâye için gelir, hızlı bir işlem için değil.

• Marka hikâyesini bölüm bölüm anlatan tek sayfalık tanıtım sitelerinde.
• Bir ürün lansmanında, ürünün katmanlarını ya da parçalarını göstermek istediğinizde.
• Mimari, turizm veya etkinlik gibi atmosferin satışın parçası olduğu sektörlerde.
• Ana sayfanın en üstündeki tek bir vitrin alanında, hemen ardından sade içerik geldiğinde.

Bu listede bir desen görüyorsunuz. Efekt hep tek bir odak noktasında kalıyor. Dolayısıyla "her bölüm hareket etsin" yaklaşımı yerine "tek bir an parlasın" yaklaşımını öneriyoruz. Benzer bir ölçülülük ilkesi küçük arayüz hareketleri için de geçerli; mikro animasyon yazımızda bu dengeyi örneklerle anlattık.

Hangi sayfalarda parallax kullanmamalısınız?

Bazı sayfa türlerinde hareketin faydası neredeyse sıfırdır, maliyeti ise yüksektir. Bu sayfalarda efekti hiç düşünmemenizi öneriyoruz.

• Ödeme ve sepet adımları: Ziyaretçi burada güven ve netlik arar. Hareket, odaklanmayı böler.
• Formlar ve randevu ekranları: Alanların yerinden oynuyormuş gibi görünmesi hata riskini artırır.
• Uzun bilgi ve blog sayfaları: Okuma akışı hareketle kesintiye uğrar.
• Ürün listeleme ve filtre sayfaları: Kullanıcı hızlı tarama yapar; arka plandaki hareket gürültü yaratır.
• Destek ve yardım sayfaları: Buraya genellikle sorunu olan, sabırsız biri gelir.

Yani kural basit: sayfanın görevi işlem ya da bilgi ise hareket ikinci planda kalmalı. Üstelik bu sayfalar çoğu zaman dönüşümün gerçekleştiği yerlerdir. Burada yaşanan küçük bir aksama, vitrin sayfasındaki etkileyici bir efektten çok daha pahalıya mal olur.

Parallax efekti performansı nasıl etkiler?

Parallax efekti, kötü kurulduğunda sayfanın en pahalı parçalarından biri olur. Çünkü her kaydırma hareketinde tarayıcıdan yeni bir çizim ister. Telefonda bu yük daha da belirgindir.

web.dev'in yüksek performanslı animasyon rehberi yalnız transform ve opacity özelliklerini canlandırmayı önerir. Ayrıca yerleşimi ya da yeniden boyamayı tetikleyen özelliklerden, gerçekten gerekmedikçe kaçınmanızı söyler. Bu özellikler tarayıcının bileşim katmanında, ana iş parçacığını yormadan çalışabilir.

Pratikte en sık gördüğümüz hata şudur: geliştirici katmanın konumunu top ya da margin değerleriyle değiştirir. Böylece tarayıcı her karede sayfa yerleşimini baştan hesaplar. Bunun yerine translate ile taşıma yapmak aynı görüntüyü çok daha düşük maliyetle verir.

Bir diğer yük kaynağı görsellerdir. Parallax alanları genellikle tam ekran, yüksek çözünürlüklü fotoğraflar kullanır. Bu fotoğraflar sıkıştırılmadan yüklenirse ilk açılış süresi uzar. Bu nedenle her parallax görselini boyutlandırmanızı ve modern formatlara çevirmenizi öneriyoruz.

Parallax Core Web Vitals değerlerini bozar mı?

Doğrudan bozmak zorunda değildir, ancak kötü kurulum üç ölçümü birden etkileyebilir. Bu ölçümlerin genel mantığını Core Web Vitals rehberimizde anlattık; burada yalnız parallax ile ilişkisine bakıyoruz.

• LCP (en büyük içerikli boyama): Parallax alanındaki büyük görsel çoğu zaman sayfanın en büyük öğesidir. Ağır bir görsel bu süreyi doğrudan uzatır.
• CLS (birikimli yerleşim kayması): Görselin yüksekliği önceden ayrılmazsa yüklendiğinde içerik aşağı itilir.
• INP (etkileşimden sonraki boyama): Kaydırma dinleyicisi ana iş parçacığını meşgul ederse dokunma ve tıklamalara geç yanıt verilir.

İyi haber şu: web.dev'in CLS belgesine göre transform özelliği, yerleşim kayması tetiklemeden öğeleri hareket ettirmenize izin verir. Dolayısıyla doğru teknikle kurulan bir parallax alanı CLS puanını kendiliğinden kötüleştirmez. Yerleşim kaymasının diğer nedenlerini CLS yazımızda bulabilirsiniz.

Hareket hassasiyeti olan ziyaretçiler için risk ne?

Bu, çoğu tasarımcının atladığı en önemli konudur. Bazı insanlar ekrandaki geniş alanlı hareketlere bedensel tepki verir. İç kulakla ilgili denge bozuklukları yaşayan kişiler bu grubun başında gelir.

W3C'nin WCAG 2.3.3 açıklama sayfası bu tepkileri baş dönmesi, mide bulantısı ve baş ağrısı olarak sıralar. Aynı sayfa parallax kaydırmayı da örnek verir ve onu çoğu zaman temel işlev için gerekli olmayan bir hareket olarak tanımlar. Yani sorun yalnız estetik değil, doğrudan bir erişilebilirlik konusudur.

Örnek senaryo: hareket hassasiyeti olan bir ziyaretçi, işletim sisteminde hareketi azaltma ayarını açmıştır. Siteniz bu ayarı görmezden gelip büyük bir arka plan katmanını kaydırmaya devam eder. Ziyaretçi birkaç saniye içinde sekmeyi kapatır. Üstelik bu kayıp analitik raporlarınızda sıradan bir hemen çıkma gibi görünür; nedenini asla öğrenemezsiniz.

Bu yüzden hareketi kapatma seçeneğini bir lüks olarak değil, tasarımın zorunlu parçası olarak görüyoruz.

WCAG 2.3.3 kriteri tam olarak ne istiyor?

WCAG 2.3.3 "Etkileşimden Kaynaklanan Animasyon" adını taşır ve AAA seviyesindedir. Kriterin özü şudur: etkileşimle tetiklenen hareket animasyonu, işlev ya da aktarılan bilgi için temel değilse devre dışı bırakılabilmelidir.

AAA seviyesi, pek çok kurumun hedeflediği AA seviyesinin üstündedir. Ancak bu, kriteri görmezden gelebileceğiniz anlamına gelmez. Bizce parallax kullanan her site bu kriteri karşılamalıdır. Çünkü çözümü basittir ve maliyeti düşüktür.

W3C bu kriter için birkaç teknik önerir. Bunlardan biri CSS tarafında hareket azaltma tercihini sorgulamaktır. Bir diğeri aynı tercihi JavaScript ile okumaktır. Ayrıca kullanıcıya sitenin kendi içinde animasyonu kapatma seçeneği sunmak da genel bir teknik olarak geçer.

Peki "temel" hareket nedir? W3C bunu, kaldırıldığında içeriğin bilgisini ya da işlevini kökten değiştiren hareket olarak tanımlar. Parallax neredeyse hiçbir zaman bu tanıma girmez. Erişilebilirlik standartlarının genel çerçevesini WCAG rehberimizde özetledik.

Hareket azaltma tercihine nasıl saygı gösterirsiniz?

Tarayıcılar, kullanıcının işletim sisteminde açtığı hareket azaltma ayarını sitelere bir medya sorgusu olarak iletir. MDN'nin prefers-reduced-motion belgesi bu sorgunun iki değeri olduğunu belirtir: tercih yok ve azalt.

Uygulamada yaklaşımınız şöyle olmalı. Önce hareketsiz, sade bir varsayılan tasarım kurarsınız. Ardından yalnız kullanıcı herhangi bir azaltma tercihi bildirmediyse parallax katmanını eklersiniz. Böylece ayarı açan ziyaretçi, hiçbir ek işlem yapmadan sabit bir sayfa görür.

1. Parallax alanının hareketsiz halini tasarlayın ve onaylayın.
2. Hareketi yalnız tercih bildirmeyen kullanıcılar için etkinleştirin.
3. JavaScript ile çalışan efektlerde de aynı tercihi okuyup dinleyiciyi hiç başlatmayın.
4. İsterseniz sayfaya görünür bir "hareketi durdur" düğmesi ekleyin.
5. Ayarı kendi cihazınızda açıp sonucu gerçekten test edin.

MDN, bu ayarın macOS, Windows, iOS ve Android'de erişilebilirlik ayarları altında bulunduğunu belirtir. Menü adları sürümden sürüme değişebildiği için kesin yolu cihazınızın güncel yardım sayfasından kontrol edin.

Parallax efekti mobilde nasıl davranır?

Parallax efekti, masaüstünde akıcı görünse bile telefonda bambaşka davranabilir. Mobil tarayıcılar kaydırmayı kendi yöntemleriyle optimize eder. Bu nedenle sabit arka plan gibi bazı teknikler bazı cihazlarda hiç çalışmaz ya da titrer.

Ekran boyutu da ayrı bir sorundur. Masaüstünde geniş bir manzara gösteren görsel, dar ekranda kırpılır ve anlamını kaybeder. Ayrıca adres çubuğunun kaydırırken açılıp kapanması görünür alanın yüksekliğini değiştirir. Sonuç olarak katmanlar beklenmedik yerlerde sıçrayabilir.

Bizim pratik önerimiz şudur: mobilde efekti ya tamamen kapatın ya da çok daha hafif bir sürüme indirin. Mobil öncelikli düşünmenin genel mantığını mobil öncelikli tasarım yazımızda anlattık. Ardından sayfanın genel mobil uyumunu mobil uyumluluk testi aracımızla hızlıca gözden geçirebilirsiniz.

Unutmayın, ziyaretçilerinizin büyük kısmı muhtemelen telefondan geliyor. Kendi analitik verinizdeki cihaz dağılımına bakarak bu kararı somutlaştırın.

Parallax efekti SEO'ya zarar verir mi?

Parallax efekti tek başına bir sıralama cezası doğurmaz. Ancak dolaylı yollardan arama görünürlüğünü etkileyebilir. Sorun genellikle efektin kendisinde değil, efekti kurmak için seçilen yapıdadır.

İlk risk tek sayfalık yapılardır. Tüm hizmetleri tek bir uzun parallax sayfasına sığdırırsanız her hizmet için ayrı bir arama sorgusunu hedefleyemezsiniz. İkinci risk, metinlerin görsel içine gömülmesidir. Başlığı fotoğrafın üzerine yazılmış bir resim olarak koyarsanız arama motoru o metni okuyamaz.

Üçüncü risk JavaScript bağımlılığıdır. İçerik ancak kaydırma betiği çalıştıktan sonra görünüyorsa tarama ve işleme sürecinde aksaklık yaşanabilir. Bu konuda JavaScript ve site hızı yazımız size yol gösterir. Kısacası içeriği her zaman düz HTML olarak sunun, hareketi yalnız üstüne bir süs olarak ekleyin.

Parallax ile scrolljacking arasındaki fark nedir?

Bu iki kavram sık karışır, ama aralarındaki fark büyüktür. Parallax, kullanıcının kaydırma hızını değiştirmeden katmanları farklı hızlarda hareket ettirir. Scrolljacking ise kaydırmanın kontrolünü kullanıcıdan alır.

Scrolljacking yapılan bir sayfada tek bir tekerlek hareketi sizi bir sonraki bölüme zorla taşır. Ya da kaydırma bir animasyon bitene kadar durur. Ziyaretçi, sayfayı kendisinin değil sitenin yönettiğini hisseder. Nielsen Norman Group da bu tür kaydırma ele geçirme davranışlarını kullanılabilirlik açısından sorunlu bulur.

Bizim kuralımız nettir: parallax kullanabilirsiniz, ama scrolljacking kullanmayın. Kaydırma hızı, yönü ve duraklama noktası her zaman ziyaretçide kalmalıdır. Örneğin ekran okuyucu ya da klavye ile gezinen biri, ele geçirilmiş bir kaydırmada içeriğin bir kısmını hiç göremeyebilir.

Parallax teknikleri birbirine göre nasıl kıyaslanır?

Aşağıdaki tablo, sahada en sık karşılaştığımız yöntemleri pratik açıdan karşılaştırıyor. Değerlendirmeler saha tecrübesine dayalı genel eğilimlerdir, her proje için garanti değildir.

Tablonun son satırını bilinçli olarak ekledik. Çünkü bazen en iyi parallax, hiç kullanılmayan parallax'tır. Aynı etkiyi iyi bir fotoğraf, güçlü tipografi ve net bir hiyerarşiyle de yaratabilirsiniz.

Ölçülü bir parallax tasarımı nasıl planlanır?

Ölçülü kullanım, efekti tasarımın merkezine değil kenarına koymak demektir. Planlamaya her zaman "bu hareket hangi mesajı güçlendiriyor?" sorusuyla başlıyoruz. Cevap yoksa efekti eklemiyoruz.

Ardından şu sınırları koyuyoruz. Sayfa başına en fazla bir ya da iki parallax alanı kullanıyoruz. Katmanlar arasındaki hız farkını küçük tutuyoruz; büyük farklar hem göz yorar hem de mide bulandırma riskini artırır. Metni hareketli katmanın üzerine değil, sabit bir zemine yerleştiriyoruz.

Kontrast da önemlidir. Hareket eden bir fotoğrafın üzerindeki beyaz yazı, fotoğrafın açık bir bölümü geldiğinde okunmaz hale gelebilir. Bu nedenle metnin arkasına yarı saydam bir katman ya da düz renkli bir alan koymanızı öneriyoruz.

Bu kararların tümünü tek seferde, tasarım aşamasında vermek en ucuz yoldur. Sitenizde parallax alanını performans ve erişilebilirlik kontrolleriyle birlikte biz kurarız; kapsamı netleştirmek için web tasarım hizmetimiz üzerinden teklif isteyebilirsiniz.

Parallax alanını nasıl test etmelisiniz?

Test, efektin gerçekten işe yarayıp yaramadığını gösteren tek yoldur. Masaüstündeki güçlü bilgisayarınızda akıcı görünen bir efekt, orta seviye bir telefonda takılabilir. Bu yüzden testi gerçek koşullara yakın yapmalısınız.

1. Gerçek cihazda kaydırın: En az bir orta seviye Android ve bir iPhone ile sayfayı yukarı aşağı gezin.
2. Tarayıcı geliştirici araçlarını açın: Boyama alanlarını ve kare düşmelerini izleyin. web.dev, yerleşim ve yeniden boyama işlerini bu araçlarla görebileceğinizi belirtir.
3. Hareket azaltma ayarını açın: Efektin tamamen durduğunu ve içeriğin eksiksiz göründüğünü doğrulayın.
4. Klavye ile gezinin: Sekme tuşuyla ilerlerken odaklanan öğenin her zaman görünür kaldığını kontrol edin.
5. Yavaş bağlantı simüle edin: Büyük görsel yüklenirken sayfanın kayıp kaymadığına bakın.
6. Saha verisini izleyin: Yayından sonra gerçek kullanıcı verisinde LCP, CLS ve INP değerlerini takip edin.

Örnek senaryo: test sırasında efektin orta seviye telefonda belirgin biçimde takıldığını fark ettiniz. Bu durumda efekti mobilde kapatmak, onu düzeltmeye çalışmaktan çoğu zaman daha akıllıca bir karardır.

Parallax alanındaki görselleri nasıl hazırlamalısınız?

Görsel hazırlığı, parallax projesinin en çok ihmal edilen adımıdır. Oysa sayfanın ilk açılış hızını büyük ölçüde bu adım belirler. Katman hareket ettiği için görselin görünen alandan biraz daha büyük olması gerekir; ancak bu fark ölçülü kalmalıdır.

• Doğru boyut: Görseli ekranın gerçekten ihtiyaç duyduğu genişlikte hazırlayın. Çok büyük bir dosyayı küçültüp göstermek boşa veri harcar.
• Birden fazla sürüm: Masaüstü, tablet ve telefon için ayrı boyutlar sunun. Böylece tarayıcı ekrana uygun dosyayı seçer.
• Modern format: Fotoğrafları daha verimli sıkıştırma sunan formatlara çevirin.
• Kompozisyon: Ana nesneyi görselin ortasına yakın tutun. Dar ekranda kırpıldığında da anlam korunur.
• Ayrılmış yükseklik: Alanın yüksekliğini önceden belirleyin ki görsel geldiğinde içerik aşağı kaymasın.

Ayrıca hero alanındaki görseli tembel yüklemeye bırakmayın. Bu görsel genellikle ilk ekranda görünür ve en büyük içerik öğesidir. Buna karşılık sayfanın aşağısındaki parallax alanlarını geç yükleyebilirsiniz. Böylece ilk açılışta yalnız gerçekten görünen dosyalar iner.

Parallax hızı ve hareket miktarı nasıl ayarlanmalı?

Hız farkı, efektin hem güzelliğini hem de riskini belirleyen ayardır. Katmanlar arasındaki fark büyüdükçe derinlik hissi artar. Ancak aynı oranda göz yorgunluğu ve rahatsızlık riski de büyür.

Bizim pratikte uyguladığımız yaklaşım, hareketi "fark edilir ama dikkat çekmez" düzeyde tutmaktır. Ziyaretçi efekti bilinçli olarak izlememeli, yalnız sayfanın canlı olduğunu hissetmelidir. Örneğin arka plan katmanı ön plandan biraz daha yavaş kaymalı; ters yönde ya da çok hızlı hareket etmemelidir.

Nielsen Norman Group'un animasyon yazıları da benzer bir dengeye işaret eder: çok hızlı hareket zor izlenir ve baş döndürebilir, çok yavaş hareket ise gecikme gibi hissettirir. Dolayısıyla tek bir doğru sayı yoktur. Değeri kendi tasarımınızda deneyerek, birkaç farklı kişiye izleterek bulursunuz.

Bir başka ipucu da şudur: aynı ekranda birden fazla katmanı farklı yönlere oynatmayın. İki ayrı hareket aynı anda göze geldiğinde hem odak dağılır hem de rahatsızlık riski artar.

Parallax efekti dönüşüm oranını nasıl etkiler?

Parallax efekti dönüşümü kendiliğinden artırmaz ya da azaltmaz. Etkisi, efektin ziyaretçiyi hedefe yaklaştırıp yaklaştırmadığına bağlıdır. Bu yüzden genel bir oran vermek yerine kendi sitenizde ölçmenizi öneriyoruz.

Örnek senaryo: bir tanıtım sayfasında parallax alanı, teklif düğmesini ilk ekranın dışına itiyor. Ziyaretçi düğmeyi görmek için uzun süre kaydırmak zorunda kalıyor. Bu durumda efekt, güzel görünmesine rağmen dönüşüm yolunu uzatıyor. Tersine, düğme ilk ekranda kalıyorsa ve efekt yalnız arka planda hafifçe çalışıyorsa risk düşer.

Ölçüm için basit bir düzen kurabilirsiniz. Önce efektli ve efektsiz iki sürümü belirleyin. Ardından aynı dönemde trafiği ikiye bölüp hedef tıklamaları karşılaştırın. Son olarak sonucu yalnız masaüstünde değil, mobilde de ayrı ayrı inceleyin. Böylece kararınız zevke değil veriye dayanır.

Parallax projesinde tasarımcı ve geliştirici neyi konuşmalı?

Parallax sorunlarının önemli bir kısmı, tasarım ile geliştirme arasındaki iletişim boşluğundan doğar. Tasarım dosyasında hareket görünmez. Bu nedenle tasarımcı ne istediğini sözle ya da kısa bir prototiple anlatmalıdır.

1. Hangi katmanın, hangi yönde ve yaklaşık ne kadar hareket edeceğini yazılı olarak belirleyin.
2. Hareket azaltma tercihi açıkken sayfanın nasıl görüneceğini ayrı bir ekran olarak tasarlayın.
3. Mobilde efektin kapanıp kapanmayacağını baştan kararlaştırın.
4. Kabul edilebilir performans sınırını, örneğin ölçüm hedeflerini, birlikte tanımlayın.
5. Yayından önce ortak bir test oturumu planlayın.

Bu beş madde, projenin sonunda "ama ben böyle düşünmemiştim" cümlesini büyük ölçüde önler. Üstelik herkes aynı hedefe baktığı için düzeltme turları kısalır.

Parallax yerine hangi alternatifleri kullanabilirsiniz?

Derinlik ve hareket hissi yaratmanın daha hafif yolları vardır. Çoğu zaman bu yollar ziyaretçiye aynı duyguyu daha az riskle verir.

• Görünür alana girişte hafif belirme: Bölüm ekrana girdiğinde kısa bir opaklık geçişi. Kısa ve tek seferlik olduğu için daha az rahatsız eder.
• Katmanlı ama sabit kompozisyon: Gölge, örtüşme ve ölçek farkıyla hareketsiz bir derinlik hissi.
• Kullanıcının başlattığı video: Kendiliğinden oynamayan, oynat düğmesiyle açılan kısa bir tanıtım.
• Güçlü tipografi ve boşluk: İyi bir hiyerarşi, hareketten daha kalıcı bir etki bırakır.

Bu alternatiflerde bile hareket azaltma tercihine saygı göstermelisiniz. Ayrıca belirme efektlerini metin okunurken tekrar tekrar tetiklemeyin. Böylece sayfa canlı kalır ama ziyaretçiyi yormaz.

Parallax kararı için kontrol listesi nasıl olmalı?

Yayından önce aşağıdaki listeyi tek tek işaretlemenizi öneriyoruz. Bir maddeye bile "hayır" diyorsanız efekti yeniden düşünün.

• Efekt, sayfanın ana mesajını güçlendiriyor mu, yoksa yalnız süs mü?
• Sayfa bir işlem ya da bilgi sayfası değil mi?
• Sayfada en fazla bir ya da iki parallax alanı mı var?
• Hareket yalnız transform ve opacity ile mi yapılıyor?
• Görseller boyutlandırılmış, sıkıştırılmış ve yükseklikleri önceden ayrılmış mı?
• Hareket azaltma tercihi açıkken efekt tamamen duruyor mu?
• Mobilde efekt kapalı ya da belirgin şekilde hafifletilmiş mi?
• Metin her zaman sabit ve yeterli kontrastlı bir zemin üzerinde mi?
• Tüm içerik JavaScript çalışmasa da düz HTML olarak görünüyor mu?
• Kaydırma kontrolü her zaman kullanıcıda mı kalıyor?

Bu liste kısa görünse de pratikte sorunların çoğunu yayından önce yakalar. Üstelik tasarımcı, geliştirici ve içerik ekibinin aynı dili konuşmasını sağlar.

Listeyi yalnız bir kez kullanıp kenara koymayın. Örneğin siteye yeni bir bölüm eklediğinizde ya da tema güncellediğinizde aynı maddeleri tekrar gözden geçirin. Çünkü küçük bir kod değişikliği, daha önce sorunsuz çalışan bir efekti sessizce bozabilir. Düzenli kontrol, bu sürprizleri erken yakalamanın en ucuz yoludur.

Sonuç olarak parallax kullanmalı mısınız?

Cevabımız koşullu bir evettir. Parallax efekti, bir hikâye anlatan vitrin alanında, ölçülü bir hızla ve kapatılabilir şekilde kurulduğunda markanıza karakter katar. Buna karşılık işlem, bilgi ya da destek sayfalarında genellikle maliyetini karşılamaz.

Biz projelerde bu kararı her zaman sayfa sayfa veriyoruz. Ana sayfada uygun bulduğumuz bir efekti iletişim sayfasına taşımıyoruz. Ayrıca her yeni efekti yayından sonra birkaç hafta izliyor, ölçüm kötüleşirse hemen sadeleştiriyoruz.

Karar verirken üç soruya odaklanın. Hareket mesajı güçlendiriyor mu? Sayfa telefonda akıcı mı? Hareket hassasiyeti olan biri efekti kapatabiliyor mu? Üç sorunun cevabı da evetse efekti güvenle kullanabilirsiniz. Değilse sade bir tasarım, çoğu zaman daha iyi sonuç verir.

Sitenizin genel yapısını, performansını ve erişilebilirliğini birlikte ele alan bir tasarım istiyorsanız ekibimiz yanınızda. Projenizin kapsamını paylaşmak ve teklif almak için web tasarım sayfamızı ziyaret edebilirsiniz.