Öğeler kaydırma alanına girerken veya çıkarken giriş ve çıkış efektleri ekleme

Giriş ve çıkış efektleri, bir öğe görüntü alanına girdiğinde veya görüntü alanından çıktığında tetiklenen animasyonlardır. Bu özellik, ilgi çekici ve dinamik kullanıcı deneyimleri oluşturmak için kullanılabilir. Örneğin, bir öğeyi görünür hale geldiğinde belirginleştirmek için giriş efekti, görünümden çıktığında küçültmek için çıkış efekti kullanabilirsiniz.

Nasıl uygulanır?

Bir öğeye giriş ve çıkış efektleri eklemek için birkaç CSS özelliğini birleştirmeniz gerekir. Adım adım açıklamalı kılavuzu aşağıda bulabilirsiniz:

1. Giriş ve çıkış animasyonları için ayrı @keyframes oluşturun. Giriş animasyonu, öğe görüntü alanına girdiğinde, çıkış animasyonu ise öğe görüntü alanından çıktığında uygulanır.

   @keyframes slide-in {
     from { transform: translateX(-100%); }
   }
   @keyframes slide-out {
     to { transform: translateX(100%); }
   }
   

2. Giriş ve çıkış karelerini öğeye ekleyin. Bunu yapmak için animation özelliğinde birden fazla animasyon tanımlayabilirsiniz.

   • Giriş animasyonuna animation-fill-mode değerinde bir backwards verin. Böylece animasyon başlamadan önce ilk durumunu uygular.
   • Çıkış animasyonuna forwards değerinde bir animation-fill-mode verin. Böylece animasyon tamamlandıktan sonra son durumunu korur.

   .animated-element {
     animation:
       slide-in 1s linear backwards,
       slide-out 1s linear forwards;
   }
   

3. Görünüm zaman çizelgesi oluşturun ve bunu animasyonlara bağlayın. Görüntüleme zaman çizelgesi, görüntü alanındaki bir öğenin görünürlüğüne bağlı bir zaman çizelgesi türüdür. view() işlevini kullanarak bir tane oluşturabilir ve ardından animation-timeline özelliğini kullanarak animasyonlarınıza uygulayabilirsiniz.

   .animated-element {
     animation-timeline: view();
   }
   

   view(), varsayılan olarak öğeyi block ekseninde izler. inline ekseninde izlemeniz gerekiyorsa view(inline) kullanabilirsiniz.

4. Animasyonları entry ve exit aralıklarıyla sınırlayın. animation-range özelliği, bir animasyonun zaman çizelgesinin hangi bölümünde çalıştırılacağını belirtmenize olanak tanır.

   • entry aralığı, öğenin görüntü alanına ilk girdiği andan tamamen görünür hale geldiği ana kadar geçen süreyi kapsar.
   • exit aralığı, öğenin görüntü alanından çıkmaya başladığı andan tamamen gizlendiği ana kadar geçen süreyi kapsar.

   .animated-element {
     animation-range: entry, exit;
   }
   

Örnek kod

Bu kod, anonim bir view-timeline kullanarak kaydırma sırasında kaydırıcının doğrudan alt öğelerini canlandırır:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: view(inline);
      animation-range: entry, exit;
    }
  }
}

Öğeler kaydırma alanına girdiğinde grow animasyonu, kaydırma alanından çıktığında ise shrink animasyonu oynatılır.

Aşağıdaki kod aynı görsel sonuca sahiptir ancak adlandırılmış bir görünüm zaman çizelgesi kullanarak kaydırıcının doğrudan alt öğelerini kaydırırken animasyon uygular:

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes grow {
      from {
        scale: 0.5;
      }
    }
    @keyframes shrink {
      to {
        scale: 0.5;
      }
    }

    .scroller > * {
      view-timeline: --tl inline;
      animation:
        grow auto linear backwards,
        shrink auto linear forwards;
      animation-timeline: --tl;
      animation-range: entry, exit;
    }
  }
}

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: view()) and (animation-range: entry)) kullanın.
  • Yalnızca kısmi desteği olan tarayıcıları filtrelemek için (animation-range: entry) kontrolü buraya DAHİL EDİLMELİDİR.
  • 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.
• 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 view() işlevini kullanırken:

• İSTEĞE BAĞLI İzlenecek eksen konusunda net olun: Varsayılan block eksenini hedeflemediğinizde (ör. yatay kaydırıcıda), view(block) veya view(inline) ile hangi eksenin izleneceği konusunda net olun.
• Animasyon, izlenen öznenin kendisine uygulanmadığında adlandırılmış bir görünüm zaman çizelgesi kullanın.

Kaydırmaya dayalı animasyon oluşturmak için view-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) view-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 view-timeline is not a flat tree ancestor of the animated element, hoist up the visibility of the view-timeline’s name by using timeline-scope on a shared ancestor.

İzlenen öznenin birden fazla öğesinin veya alt öğesinin animasyonlu olması gerektiğinde adlandırılmış bir view-timeline tercih edin.

Tarayıcı desteği ve yedek stratejiler

Bu nedenle, genellikle bir yedek strateji gerekir.

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. .wrapper öğesinin görünürlüğünü izlemek için IntersectionObserver kullanır ve katmanların transform özelliğini kaydırma konumuna göre günceller.

<script>
  if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
    const observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          // This matches the effect as defined in the CSS example above.
          // Customize this further if needed.
          entry.target.style.scale = 0.5 + entry.intersectionRatio * 0.5;
        }
      },
      {
        threshold: Array.from({ length: 101 }, (_, i) => i / 100),
      }
    );

    document.querySelectorAll('.scroller > *').forEach((el) => {
      observer.observe(el);
    });
  }
</script>