Kaydırma İlerleme Göstergesi Oluşturma

Kaydırma ilerleme göstergesi, kullanıcının kaydırılabilir bir doküman veya kapsayıcıdaki ilerleme durumunu görsel olarak gösteren yaygın bir kullanıcı arayüzü kalıbıdır. Kullanıcı sayfayı kaydırdıkça görsel bir öğe, kullanıcının konumunu yansıtacak şekilde güncellenir. Böylece, içeriğin ne kadarının görüntülendiği ve ne kadarının kaldığı net ve sezgisel bir şekilde anlaşılır.

Nasıl uygulanır?

Kaydırma ilerleme durumu göstergesi oluşturmak için iki şeye ihtiyacınız vardır:

1. İlerleme çubuğu olarak kullanılacak bir öğe. Bu öğe genellikle position: fixed veya position: absolute olur. Böylece kullanıcı sayfayı kaydırırken görünümde kalır.
2. Kaydırma konumuna bağlı bir animasyon.

Bunu şu şekilde yapabilirsiniz:

• Öncelikle, ilerleme çubuğunuz olarak kullanılacak bir HTML öğesi oluşturun. Bu öğeyi dilediğiniz gibi şekillendirebilirsiniz.
• Ardından, CSS'nizde ilerleme çubuğunu ölçeklendiren bir @keyframes animasyonu tanımlayın. Yaygın bir yaklaşım, öğeyi scaleX(0) ile scaleX(1) arasında ölçeklendirmektir.
• Son olarak, bu animasyonu ilerleme çubuğu öğenize uygulayın ve animation-timeline değerini bir kaydırma zaman çizelgesi olarak ayarlayın. Bu, tarayıcıya animasyonun ilerleme durumunu en yakın üst öğe kaydırıcının kaydırma konumuna göre yönlendirmesini söyler.

Örnek kod

Bu kod, scroll() işlevi tarafından oluşturulan anonim bir scroll-timeline kullanarak kaydırma sırasında #progress öğesini büyütür.

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll())) {
    @keyframes grow-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    #progress {
      position: fixed;
      left: 0; top: 0;
      width: 100%; height: 1em;
      background: red;

      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: scroll();
    }
  }
}

DOM'daki konumu nedeniyle scroll() işlevi, block yönündeki en yakın üst kaydırıcısını izler. Bu örnekte bu, kök kaydırıcıdır.

<body>
  <!-- MANDATORY: Purely decorative visual scroll progress bars MUST set aria-hidden="true" to remove the empty element from the assistive technology reading tree -->
  <div id="progress" aria-hidden="true"></div>
</body>

Bu kod, scroll-timeline özelliği tarafından oluşturulan adlandırılmış bir kaydırma zaman çizelgesini kullanarak kaydırma sırasında #progress öğesini büyütür.

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: scroll())) {
    @keyframes grow-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    :root {
      scroll-timeline: --tl block;
    }

    #progress {
      position: fixed;
      left: 0; top: 0;
      width: 100%; height: 1em;
      background: red;

      transform-origin: 0 50%;
      animation: grow-progress auto linear;
      animation-timeline: --tl;
    }
  }
}

En İyi Uygulamalar

Kaydırmaya dayalı animasyonları kullanırken sorunsuz ve erişilebilir bir deneyim sunmak için birkaç en iyi uygulamayı takip etmek önemlidir:

• ÖZELLİK algılamayı ekleyin: Tüm tarayıcılar kaydırmaya dayalı animasyonları desteklemez. Destek durumunu kontrol etmek ve desteklemeyen tarayıcılar için yedek sağlamak üzere @supports (animation-timeline: scroll()) kullanın.
  • Yedek strateji için scroll-timeline-polyfill paketini KULLANMAYIN. Bu paketin özellikleri tamamlanmamıştır ve bilinen birçok sorunu vardır.
  • Animasyonun yalnızca dekoratif olduğu düşünülüyorsa progresif geliştirmeyi tercih edin ve yedek SAĞLAMAYIN.
• YAPIN: Sadece dekoratif amaçlı öğeleri yardımcı teknoloji okuma akışlarından kaldırın: Ekran okuyucuların boş, adsız düğümlerle karşılaşmaması için sadece görsel amaçlı kaydırma göstergelerine aria-hidden="true" uygulayın.
• DO respect user preferences: Some users prefer to have less motion on the web. Bu kullanıcılar için animasyonlarınızı devre dışı bırakmak veya azaltmak üzere prefers-reduced-motion medya sorgusunu kullanın.
• Yalnızca performanslı CSS özelliklerini canlandırmaya ÇALIŞIN: En akıcı animasyonlar için tarayıcının birleştirici iş parçacığı tarafından işlenebilen özellikleri (ör. transform ve opacity) canlandırın. width veya height gibi diğer özellikleri canlandırmak performans sorunlarına yol açabilir.
• DO Doğru bildirim sırasını kullanın: animation kısaltma özelliğini kullanırken, kısaltmanın zaman çizelgesini sıfırlamasını önlemek için animation-timeline özelliğini sonra bildirin.

Kaydırmaya dayalı animasyon oluşturmak için scroll() işlevini kullanırken:

• İSTEĞE BAĞLI Kaydırıcıyı açıkça belirtin: En yakın üst öğe kaydırıcıyı hedeflemiyorsanız scroll(root) veya scroll(self) ile hangi kaydırıcıyı kullanmak istediğinizi açıkça belirtin.
  • root, nearest veya self yeterli olmadığında adlandırılmış bir kaydırma zaman çizelgesi kullanın.
• İSTEĞE BAĞLI İzlenecek eksen konusunda net olun: Varsayılan block eksenini hedeflemediğinizde (ör. yatay kaydırıcıda), scroll(block) veya scroll(inline) ile hangi eksenin izleneceği konusunda net olun.

Kaydırmaya dayalı animasyon oluşturmak için scroll-timeline özelliğini kullanırken:

• Ad için CSS <dashed-ident> KULLANIN.
• İSTEĞE BAĞLI İzlenecek eksen konusunda net olun: Varsayılan block eksenini hedeflemediğinizde (ör. yatay kaydırıcıda) scroll-timeline-axis ile hangi eksenin izleneceği konusunda net olun.
• DO make sure the scope of the lookup works: When the element that is declaring the scroll-timeline is not a flat tree ancestor of the animated element, hoist up the visibility of the scroll-timeline’s name by using timeline-scope on a shared ancestor.

Yedek stratejiler

Kaydırmaya dayalı animasyonları desteklemeyen tarayıcılarda görsel efektleri yeniden oluşturmak için yedek kullanabilirsiniz. Yedekler genellikle bir kaydırma dinleyicisi (ScrollTimeline efektleri için) veya IntersectionObserver API (ViewTimeline efektleri için) ile oluşturulur.

Kaydırmaya dayalı animasyonlar için yerleşik desteğe sahip tarayıcılarda DAİMA yerel CSS uygulamasını kullanın. Bu uygulamalar daha yüksek performans sağlar.

Yedek yaklaşımı kullanılarak her efektin yeniden oluşturulamayacağını unutmayın.

Özellikle bu kullanım alanında, aşağıdaki komut dosyası, kaydırmaya dayalı animasyonları desteklemeyen tarayıcılar için yedek seçeneği uygular. Kök öğenin kaydırma konumunu izlemek için bir kaydırma dinleyicisi kullanır ve ilerleme çubuğunun transform özelliğini buna göre günceller.

<script>
  if (!CSS.supports('animation-timeline', 'scroll()')) {
    const progress = document.querySelector('#progress');

    window.addEventListener('scroll', () => {
      const scrollable = document.documentElement.scrollHeight - window.innerHeight;
      const scrolled = window.scrollY;
      const progressPercentage = (scrolled / scrollable);

      progress.style.transform = `scaleX(${progressPercentage})`;
    });
  }
</script>