Scroll fade, yok ol

 (dbushell.com)
1 puan yazan GN⁺ 2026-03-19 | 1 yorum | WhatsApp'ta paylaş
  • Web sitelerinde kaydırma sırasında öğelerin yavaşça belirdiği “scroll fade” efektini eleştiriyor; görsel rahatsızlık ve geliştirme karmaşıklığına dikkat çekiyor
  • Çoğu uygulamanın aşırı geçiş efektleri ve uygunsuz zamanlama nedeniyle kullanıcı deneyimine zarar verdiğini, geliştiricilere de yük getirdiğini açıklıyor
  • Erişilebilirlik sorunları ve vestibular disorders (vestibüler bozukluklar) gibi gerçek kullanıcılar üzerindeki olumsuz etkilerden söz ediliyor
  • Bu tür efektlerin performans düşüşüne ve Core Web Vitals metriklerinin bozulmasına (LCP vb.) yol açabileceği, ayrıca çoğu zaman yeterli test ve doğrulama olmadan uygulandığı belirtiliyor
  • Yazı, “scroll fade hızlı bir çözüm değil; en baştan tasarlanması gereken karmaşık bir özelliktir” diyerek bunun kullanımının kesin biçimde bırakılmasını istiyor

Scroll fade’in sorunları

  • Scroll fade, kullanıcı sayfayı aşağı kaydırdığında öğelerin yavaşça görünmesini sağlayan görsel bir efekt; çoğu zaman Y ekseni dönüşümü (transform) ile birlikte kullanılıyor
    • Yazıda bu, “korkunç bir deneyim” olarak tanımlanıyor ve tüm kullanıcılara aynı şekilde uygulandığı belirtiliyor
  • Etki ince ayarlanmışsa kabul edilebilir olabilir, ancak çoğu durumda aşırı kullanıldığı için görsel olarak rahatsız edici olduğu söyleniyor
    • Proje neredeyse tamamlanmışken “tüm öğelere fade uygulayın” talebinin gelmesi örneği veriliyor
  • Yazar bunu “sıkıcılığı gidermeye yönelik yanlış bir girişim” olarak görüyor ve aslında siteyi daha özensiz hale getirdiğini düşünüyor

Erişilebilirlik ve kullanıcı etkisi

  • Birçok geliştirici, temel itiraz gerekçesi olarak erişilebilirlik sorunlarını öne sürüyor
    • Özellikle vestibular disorders (vestibüler bozukluklar) yaşayan kullanıcılar, hareket efektleri nedeniyle rahatsızlık hissedebiliyor
    • CSS’in prefers-reduced-motion media query’si ile kısmi koruma sağlanabilse de yazar, “hareketin varsayılan olarak kapalı olması ve isteğe bağlı açılması” gerektiğini savunuyor
  • Bilişsel aşırı yük ve dikkat dağınıklığı sorunları da eleştiriliyor
    • Özellikle Apple cihazlarında hazırlanmış sitelerin Windows, Linux ve Android ortamlarında farklı davrandığı örneklerin sık görüldüğü belirtiliyor

Test ve performans sorunları

  • Scroll fade efektini uygulamadan önce gerçek kullanıcı testi ve performans doğrulaması yapılması gerektiği vurgulanıyor
    • Kullanıcıların görevlerini hâlâ yerine getirip getiremediği, hemen çıkma oranının (bounce rate) artıp artmadığı gibi noktaların kontrol edilmesi gerektiği belirtiliyor
    • Test etmeye niyetiniz yoksa “riske girmeyin” uyarısı yapılıyor
  • Yazar, kendi betiğinin Scott Jehl’in “This CSS Will Self-Destruct” tekniğini kullandığını belirtiyor
    • Bunun, JavaScript devre dışı olduğunda koruma sağlayan bir yaklaşım olduğu ifade ediliyor

Core Web Vitals ve SEO etkisi

  • Scroll fade’in Largest Contentful Paint (LCP) gibi Core Web Vitals göstergelerini kötüleştirme ihtimalinin yüksek olduğu belirtiliyor
    • Doğrudan veri sunulmasa da yazar, geçmişte incelediği sitelerde “korkunç LCP” değerleri gördüğünü söylüyor
  • SEO etkisi konusunda ise “Google’ın zaten düşük kaliteli içerik sunduğunu söyleyenler var” diyerek alaycı ve kuşkucu bir tavır sergiliyor
    • Yine de bu blog yazısıyla, söz konusu efekti popülerlikten düşürme niyetini açıkça ortaya koyuyor

Sonuç: Scroll fade’e yasak çağrısı

  • “5 harika scroll fade efekti” başlığı altında “yapmayın” ifadesini beş kez tekrarlayarak yazıyı alaycı biçimde bitiriyor
  • Scroll fade’in hızlı bir çözüm olmadığı, tüm site yapısı düşünülerek en baştan tasarlanması gereken karmaşık bir özellik olduğu vurgulanıyor
  • Yazı, geliştiricilerin topluca “teknik olarak imkânsız” diye ilan etmesi yönünde bir şakayla kapanıyor
  • Nihai mesaj net: “Scroll fade, yok ol (Death to scroll fade)”

İlgili okumalar

1 yorum

 
GN⁺ 2026-03-19
Hacker News yorumları

  • Kişisel olarak gerçekten nefret ettiğim bir kaydırma öğesi var
    Tam olarak, aşağı kaydırırken kaybolup yukarı kaydırırken yeniden beliren yapışkan başlık
    Sayfayı her yukarı aşağı hareket ettirdiğimde yanıp sönen o hareket fazlasıyla sinir bozucu
    uBlock gibi bir şeyle kaldırınca da bu kez sayfanın en üstündeyken bile başlık kayboluyor, bu da sorun oluyor

    • Buna sonuna kadar katılıyorum. Okuduğum cümleyi hep ekranın en üstünde tutma alışkanlığım var, bu yüzden cümleyi yeniden okumak için her seferinde başlığın içinden geçmem gerekiyor
    • Yalnızca masaüstünde kolayca kullanılabiliyor ama oldukça tatmin edici bir çözüm var
      Kill Sticky Headers adlı betiği tavsiye ederim
    • Safari’de “Remove Distracting Elements” özelliği var
      Bazı web siteleri gerçekten yanına bir ‘haşere kontrol aracı’ alıp gitmeyi gerektirecek kadar dikkat dağıtıcı

  • “Reader Mode” özel bir mod değil, varsayılan gezinme deneyimi olmalı
    Hatta gösterişli stil istiyorsan “Clown Mode”u açman gerektiğini düşünüyorum

    • Ben tüm sayfanın tek bir uzun görsel olarak işlendiği, sonra da onun kaydırıldığı bir okuma modu istiyorum
      Tarayıcı sayfaya “tüm içerik zaten ekranda” diye yalan söylese harika olurdu
    • Okuyucu modunun varsayılan olmamasının nedeni, web sitesi yapımcılarının bu özelliği bilerek bozamamasını istemek gibi görünüyor
    • macOS ve iOS’ta okuyucu modunu varsayılan olarak ayarlayabiliyorsun
    • Sayfa açıldığında okuyucu modu otomatik devreye girse, gerekirse de birkaç saniye içinde ESC ile kapatılabilse güzel olurdu
    • “Clown Mode” ifadesi çok komik. Eski Windows XP’nin “Fisher-Price” temasını hatırlattı

  • İlk başta bunun iOS hakkında olduğunu sandım
    iOS 26’dan itibaren web sayfasının üst kısmında griye doğru bir fade-out oluşuyor ve bu çok rahatsız edici
    Metin rengi dinamik olarak değiştiği için bakışım sürekli yukarı çekiliyor
    Apple’ın böyle bir görsel dikkat dağınıklığını fark etmemesi mümkün değil; neden böyle bir tasarım yaptıklarını merak ediyorum

    • Daha da kötü bir örnek olarak, iOS’teki Music uygulaması oynatma kontrollerini içeriğin üstüne taşıyıp şeffaf biçimde üst üste bindirdi
      Altındaki içerik de kaydırma fade’i uygulanmış durumda
    • “Reduce Transparency”yi açınca üst ve alt kısımlar yalnızca beyaz boş alanlara dönüşüyor
      iPhone’um tekrar home tuşlu dönem tasarımına dönmüş gibi görünüyor, bu da komiğime gidiyor

  • Bu etkinin web geneline yayıldığı söyleniyor ama ben bunu ilk kez şimdi gördüm
    Gözümün önünde animasyon hareket ederse yazı okuyamıyorum
    Yine de alttaki japon balığı animasyonu güzelmiş, ayrı bir yerde kullanmak isterdim

    • Anthropic’in sitelerinde bu etkiyi sık görüyorum
      Örneğin Claude Agents sayfasında da açıkça görülüyor
      Claude’un stil rehberi diğer LLM tabanlı sitelere de yayılmış gibi
    • Aslında bu tür efektler SaaS pazarlama sayfalarında çok yaygın
      Sadece basit fade-in değil, yandan kayarak gelen versiyonları da çok sık görülüyor
    • Ben de siteyi yeniden tasarlarken Claude bana böyle animasyonlar önermişti
      Claude bunu bu kadar özgüvenle tavsiye ediyorsa, muhtemelen zaten birçok kişi uygulamıştır
    • İyi uygulanırsa bakışı yönlendiren ince ve keyifli bir efekt olabilir
      Bu site ise bunu bilerek abartılı biçimde gösteren bir örnek
    • history-of-animation.webflow.io gibi sitelere de bakılabilir

  • Bence bu kaydırma fade’i modası bir hatanın yanlış anlaşılmasından doğdu
    Başlangıçta bu, görsellerin gecikmeli yüklenmesi (lazy loading) yüzünden oluşan bir titremeydi
    Sonra tasarımcılar bunu kasıtlı bir efekt sanıp “hadi bunu güzelce fade yapalım” demeye başladı

    • Ama gerçekte bu sadece “havalı görünsün” diye yapılan bir tasarım aşırılığı
      İçerikten çok kaydırmanın kendisine takıntılı olma hali var
    • Yine de bunun yalnızca bir hatadan ibaret değil, ayrı bir akım olduğunu düşünüyorum

  • Ben bir adım daha ileri gidip şunu söylemek istiyorum — paralaks kaydırma da yok olmalı
    Keşke tüm kaydırma animasyonları ortadan kalksa

    • Kaydırma, sadece sabit boyutlu bir görünümü yukarı aşağı hareket ettiren basit bir işlem olsa yeter
    • Tabii ince ayarlı görsel paralaksı kabul edilebilir
      Ama her unsurun kafasına göre farklı hızlarda hareket etmesi berbat oluyor
    • Animasyonun kendisine karşı değilim ama amaçsızca her yere serpilince yemeğe fazla ketçap sıkmak gibi oluyor
    • Özellikle kaydırma olayını override etmeye hiç dayanamıyorum
      Vimium’un yumuşak kaydırmasını mahvediyor

  • Bu sayfa gerçekten hareket tutmasını tetikleyen şeylerin zirvesi
    Çocukluğumdan beri şiddetli hareket tutması yaşadım; bugün bile otobüs ve asansör benim için işkence
    Bu sayfaya birkaç saniye bakınca bile kusacak gibi oldum ve hemen okuyucu moduna geçtim
    Yine de bu tür sorunlara dair farkındalığın artması sevindirici

    • Bende de aynı derecede şiddetli hareket tutması var
      Direksiyon başında değilsem çok acı veriyor ve başkaları bunu anlamıyor
      Özellikle sürekli hızlanıp yavaşlayan sürüş alışkanlığı tam bir işkence
    • Bunu yaşayan tek kişi olmadığımı görmek iyi geldi
      Birkaç dakika bakmak bile migreni tetiklemeye yetiyordu
    • Bende hareket tutması yok ama bu sayfaya bakınca midem bulandı
      Gerçekten korkunç bir deneyimdi

  • Eskiden scrolljacking seven bir müşteriyle çalışmıştım
    Paralaks efektini keşfedince tamamen ona kapıldı ve sonunda beni işten çıkardı
    Şimdi o site iPhone 16+ dışındaki tüm cihazlarda tekliyor

  • Son ayrıntı da gözüme çarptı — seçildiğinde yazının görünmez hale getirildiği bölüm
    Gerçekte, bu kadar ince ayrıntılara kadar uğraşan ama okuması zor olan siteler pek azdır

    • Genelde bunun yerine metin seçimini tamamen engelleyip “kutsal metni” korumaya çalışırlar

  • Animasyonla uğraşırken çok basit bir kural kullanıyorum

    animationCount = 0
animateElement(el) {
  el.animate({duration: BASE_DURATION / animationCount})
  animationCount++
}

    Mantık, tekrarlandıkça animasyon süresini kısaltmak
    İlk başta güçlü oluyor ama giderek kısalıyor; böylece genel olarak daha atak bir his veriyor