Rulo Slayt Efektleri Oluşturma

Web özellikleri: Kaydırmaya dayalı animasyonlar Kaydırarak tutturma

Dönen slayt efektleri, dönen öğelere görsel ilgi eklemenin harika bir yoludur. Kullanıcı slaytlar arasında gezinirken her slayt, kaydırma alanına girerken, ortalanırken ve çıkarken animasyonlu olarak gösterilebilir. Örneğin, slaytlar karartılarak gösterilebilir ve gizlenebilir, döndürülebilir veya boyutları ölçeklendirilebilir. Bu sayede dinamik ve ilgi çekici bir kullanıcı deneyimi sunulur. Basit giriş/çıkış animasyonlarının aksine bu efekt, slaydın tüm kaydırma alanındaki görünümünü kontrol etmek için tek ve sürekli bir animasyon kullanır.

Nasıl uygulanır?

Rulo slayt efektlerini şu şekilde oluşturabilirsiniz:

  1. Kaydırıcı oluşturun: Bu öğe, bant slaytlarınız için kapsayıcı görevi görür. Bu örnekte, yatay kaydırmaya izin vermek için overflow-x: scroll kullanılmıştır.

    <ul class="scroller">
  <li class="entry">1</li>
  <li class="entry">2</li>
  <li class="entry">3</li>
  …
</ul>

    .scroller {
  overflow-x: scroll;
}

  2. Animasyonu tanımlayın: Slaytlarınızın kaydırma alanında gezinirken farklı durumlarını tanımlayan bir CSS animasyonu oluşturun. Animasyonun herhangi bir bölümü için kareler tanımlayabilirsiniz. Örneğin, 50% anahtar karesini ekleyerek slaytların kaydırma alanının ortasında olduğu bir durum tanımlayabilirsiniz. Bu örnekte, scale özelliği, slaytların merkeze yaklaştıkça büyümesini ve uzaklaştıkça küçülmesini sağlar.

    @keyframes animate {
  0% {
    scale: 0.5;
  }
  50% {
    scale: 1;
  }
  100% {
    scale: 0.5;
  }
}

  3. Animasyonu uygulayın ve view-timeline: Animasyonu bant slaytlarına ekleyin ve kapsayıcıda kaydırılırken öğeyi izleyen bir view-timeline'e bağlayın.

    .scroller > * {
  animation: animate auto linear both;
  animation-timeline: view(inline);
}

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

Örnek kod

Bu kod, anonim bir view-timeline kullanarak kaydırma sırasında yatay kaydırma çubuğunun rulo öğelerini canlandırır:

@keyframes animate {
  0% {
    scale: 0.5;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0.5;
  }
}

.scroller > * {
  /* Applies the animation using an `auto` duration */
  animation: animate auto linear both;
  /* Sets the animation timeline to use an anonymous view progress timeline, tracking the element's progress through the scroller on the inline axis */
  animation-timeline: view(inline);
}

Bu kod, adlandırılmış bir view-timeline kullanarak kaydırma sırasında yatay kaydırıcının rulo öğelerini canlandırır:

@keyframes animate {
  0% {
    scale: 0.5;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0.5;
  }
}

/* This creates a named view-timeline on each carousel item. The timeline is used to drive the animation that is applied on the same element. */
.scroller > * {
  /* Applies the animation using an `auto` duration */
  animation: animate auto linear both;
  /* Defines a named view progress timeline, tracking the element's progress through the scroller on the inline axis */
  view-timeline: --item inline;
  /* Sets the animation timeline to use the named view progress timeline defined above */
  animation-timeline: --item;
}

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ısayol özelliğini kullanırken, kısayolun zaman çizelgesini sıfırlamasını önlemek için animation-timeline ve animation-range özelliklerini sonra bildirin.

Birden fazla DOM öğesinin aynı zaman çizelgesine göre animasyon oluşturması gerektiğinde veya view-timeline tanımlanmış öğenin alt öğelerini canlandırmanız gerektiğinde adlandırılmış bir view-timeline tercih edin. Animasyon uyguladığınız öğe aynı zamanda view-timeline öğesini tanımlayan öğeyse view() kullanarak anonim bir görüntüleme zaman çizelgesi kullanabilirsiniz.

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.

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

  • Ad için CSS <dashed-ident> KULLANIN (ör. view-timeline: --my-custom-name)
  • İ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.

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. Döngüdeki her öğe için duraklatılmış bir animasyon oluşturmak üzere Web Animations API'yi (Element.animate()) kullanır. Ardından, kaydırıcıdaki scroll etkinliğini dinler ve her animasyonun currentTime değerini, öğenin kaydırıcıdaki kaydırma ilerleme durumuna göre günceller.

// Fallback for browsers that don't support scroll-driven animations
if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
  const scroller = document.querySelector('.scroller');
  const entries = document.querySelectorAll('.entry');

  // Create a map to store animations
  const animations = new Map();

  entries.forEach(entry => {
    const animation = entry.animate(
      {
        scale: ['0.5', '1', '0.5']
      },
      {
        duration: 1, // We'll control the time ourselves
        fill: 'both'
      }
    );
    animation.pause();
    animations.set(entry, animation);
  });

  // Update animations on scroll
  const tick = () => {
    const scrollerRect = scroller.getBoundingClientRect();

    entries.forEach(entry => {
      const animation = animations.get(entry);
      if (!animation) return;

      const entryRect = entry.getBoundingClientRect();
      const progress = (entryRect.left + entryRect.width / 2 - scrollerRect.left) / scrollerRect.width;

      animation.currentTime = progress;
    });
  };
    
  scroller.addEventListener('scroll', tick);
  tick();
}