Kaydırmaya dayalı animasyonların performansıyla ilgili bir örnek olay

Yuriko Hirota

Kaydırmaya dayalı animasyonlardaki yenilikler

Kaydırmaya dayalı animasyonlar, kullanıcının kaydırma konumu tarafından tetiklenen ve web sitenize veya web uygulamanıza etkileşim ve görsel ilgi katmanın bir yoludur. Bu, kullanıcıların ilgisini çekmenin ve web sitenizi görsel olarak daha çekici hale getirmenin harika bir yolu olabilir.

Geçmişte, kaydırmaya dayalı animasyonlar oluşturmanın tek yolu ana iş parçacığındaki kaydırma etkinliğine yanıt vermekti. Bu durum iki büyük soruna yol açtı:

• Kaydırma işlemi ayrı bir iş parçacığında gerçekleştirilir ve bu nedenle kaydırma etkinlikleri eşzamansız olarak sunulur.
• Ana iş parçacığı animasyonları takılmaya tabidir.

Bu durum, kaydırmaya duyarlı ve kaydırma işlemiyle senkronize olan yüksek performanslı animasyonlar oluşturmayı imkansız veya çok zor hale getirir.

Artık kaydırmaya dayalı animasyonları desteklemek için yeni bir API grubu sunuyoruz. Bu API'leri CSS veya JavaScript'ten kullanabilirsiniz. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır. Bu sayede kaydırmaya dayalı animasyonların uygulanması çok daha kolay ve çok daha sorunsuz hale gelir. Kaydırmaya dayalı animasyonlar API'si şu anda aşağıdaki tarayıcılarda desteklenmektedir:

Bu makalede, yeni API ile kaydırmaya dayalı animasyonların ne kadar kolay ve sorunsuz olabileceğini göstermek için yeni yaklaşım, klasik JavaScript tekniğiyle karşılaştırılıyor.

Kaydırmaya dayalı animasyonlar CSS API'si ve klasik JavaScript

Aşağıdaki örnek ilerleme çubuğu, sınıf JavaScript teknikleri kullanılarak oluşturulmuştur.

Doküman, kullanıcının scroll öğesini ne kadar kaydırdığını hesaplamak için her scroll etkinliği gerçekleştiğinde yanıt verir.scrollHeight

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

Aşağıdaki demoda, CSS ile yeni API'nin kullanıldığı aynı ilerleme çubuğu gösterilmektedir.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

Yeni animation-timeline CSS özelliği, kaydırma aralığındaki bir konumu otomatik olarak ilerleme yüzdesine dönüştürerek tüm zorlu işleri yapar.

Şimdi de ilginç kısma geçelim: Web sitesinin her iki sürümünde de ana iş parçacığı kaynaklarının çoğunu tüketecek çok ağır bir hesaplama uyguladığınızı varsayalım.

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

Beklediğiniz gibi, klasik JavaScript sürümü ana iş parçacığı kaynakları kavşağı nedeniyle titrek ve yavaş hale geliyor. Öte yandan, CSS sürümü yoğun JavaScript çalışmasından hiç etkilenmez ve kullanıcının kaydırma etkileşimlerine yanıt verebilir.

Aşağıdaki ekran görüntülerinde gösterildiği gibi, Geliştirici Araçları'nda CPU kullanımı tamamen farklıdır.

Aşağıdaki demoda, CyberAgent tarafından oluşturulan kaydırmaya dayalı animasyon uygulaması gösterilmektedir. Kaydırdıkça fotoğrafın belirginleştiğini görebilirsiniz.

Yeni kaydırmaya dayalı animasyonlar JavaScript API'si ve klasik JavaScript

Yeni API'nin avantajı yalnızca CSS ile sınırlı değildir. JavaScript kullanarak da akıcı kaydırmaya dayalı animasyonlar oluşturabilirsiniz. Aşağıdaki örneğe göz atın:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Bu sayede, yalnızca JavaScript kullanarak önceki CSS demosunda gösterilen ilerleme çubuğu animasyonunu oluşturabilirsiniz. Temel teknoloji, CSS sürümüyle aynıdır. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır. Bu sayede, animasyonlar klasik JavaScript yaklaşımına kıyasla çok daha sorunsuz hale gelir.

Ayrıca bu yeni API, bildirim temelli kaydırmaya dayalı animasyonları etkinleştirmek için mevcut Web Animations API (WAAPI) ve CSS Animations API ile birlikte çalışır.

Daha fazla demo ve kaynak

CSS ve JavaScript'teki bu yeni API'leri kullanarak demoları karşılaştırabileceğiniz bu demo sitesi üzerinden kaydırmaya dayalı animasyonun farklı uygulamalarını inceleyebilirsiniz.

Kaydırmaya dayalı yeni animasyonlar hakkında daha fazla bilgi edinmek isterseniz bu makaleye ve I/O 2023 konuşmasına göz atın.