Kaydırmayla çalışan animasyonlardaki yenilikler
Kaydırma odaklı animasyonlar, kullanıcının kaydırma konumundan tetiklenerek web sitenize veya web uygulamanıza etkileşim ve görsel ilgi göstermenin bir yoludur. Bu, kullanıcıların ilgisini canlı tutmak ve web sitenizi görsel açıdan daha çekici hale getirmek için harika bir yol olabilir.
Eskiden kaydırmaya dayalı animasyonlar oluşturmanın tek yolu, ana iş parçacığındaki kaydırma etkinliğine yanıt vermekti. Bu durum iki önemli soruna yol açmıştır:
- Kaydırma ayrı bir iş parçacığında gerçekleştirilir ve bu nedenle kaydırma etkinliklerini eşzamansız olarak yayınlar.
- Ana iş parçacığı animasyonları jank'a tabidir.
Bu, kaydırmayla senkronize olan yüksek kaydırmaya dayalı animasyonlar oluşturmayı imkansız veya çok zor hale getirir.
Şimdi de CSS veya JavaScript'ten kullanabileceğiniz kaydırmaya dayalı animasyonları desteklemek için yeni bir API grubu sunuyoruz. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışır. Böylece, kaydırmaya dayalı animasyonların uygulanması hem çok daha kolay hem de çok daha yumuşak olur. Kaydırmayla çalışan animasyonlar API'si şu anda aşağıdaki tarayıcılarda desteklenmektedir:
Bu makalede, kaydırmaya dayalı animasyonların yeni API ile ne kadar kolay ve sorunsuz şekilde sorunsuz olabileceğini göstermek için, yeni yaklaşım klasik JavaScript tekniğiyle karşılaştırılmıştır.
Kaydırma odaklı animasyonlar CSS API ile klasik JavaScript karşılaştırması
Aşağıdaki örnek ilerleme çubuğu, sınıf JavaScript teknikleri kullanılarak oluşturulmuştur.
Doküman, kullanıcının sayfayı kaydırdığı scrollHeight yüzdesini hesaplamak için scroll etkinliği her gerçekleştiğinde yanıt verir.
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, aynı ilerleme çubuğu CSS ile yeni API'yi kullanırken 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 animasyon-zaman çizelgesi CSS özelliği, kaydırma aralığındaki bir konumu otomatik olarak ilerleme yüzdesine dönüştürür ve böylece işin zor kısmını halleder.
Şimdi işin ilginç olan kısmına geçelim. Web sitesinin her iki sürümü için de ana iş parçacığı kaynaklarının çoğunu tüketecek çok yoğun 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);
}
Tahmin edebileceğiniz gibi, klasik JavaScript sürümü, ana iş parçacığı kaynaklarının birleşmesi nedeniyle kötü ve yavaş çalışıyor. Diğer yandan, CSS sürümü yoğun JavaScript çalışmalarından hiçbir şekilde 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ı'ndaki CPU kullanımı tamamen farklıdır.
Aşağıdaki demoda, CyberAgent tarafından oluşturulan kaydırmaya dayalı animasyonun bir uygulaması gösterilmektedir. Sayfayı kaydırdıkça fotoğrafın yavaşça kaybolduğunu görebilirsiniz.
Kaydırmayla çalışan yeni animasyonlar JavaScript API'si ile klasik JavaScript'in karşılaştırması
Yeni API'nin avantajı CSS ile sınırlı değildir. JavaScript kullanarak da kaydırmaya dayalı sorunsuz 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, önceki CSS demosunda gösterilen ilerleme çubuğu animasyonunu yalnızca JavaScript kullanarak oluşturmanızı sağlar. Temel teknoloji CSS sürümüyle aynıdır. API, mümkün olduğunca az ana iş parçacığı kaynağı kullanmaya çalışarak animasyonları klasik JavaScript yaklaşımına kıyasla çok daha yumuşak hale getirir.
Ayrıca bu yeni API, bildirim temelli kaydırmaya dayalı animasyonları etkinleştirmek için mevcut Web Animasyonları API'si (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 sitesinden, kaydırmaya dayalı animasyonun farklı uygulamalarına göz atabilirsiniz.
Kaydırma destekli yeni animasyonlar hakkında daha fazla bilgi edinmek isterseniz bu makaleye ve I/O 2023 konuşmasına göz atın.