Kaydırma odaklı animasyonlar, web'de yaygın bir kullanıcı deneyimi kalıbıdır. Kaydırma odaklı bir animasyon, bir kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Bu, yukarı veya aşağı kaydırdığınızda bağlı animasyonun doğrudan tepki olarak ileri veya geri ilerleyeceği anlamına gelir. Paralaks arka plan resimleri veya siz ekranı kaydırdıkça hareket eden okuma göstergeleri gibi efektler buna örnek gösterilebilir.
Geliştiriciler genellikle ana iş parçacığındaki kaydırma etkinliklerine yanıt vermek için JavaScript kullanarak kaydırmaya dayalı animasyonlar oluştururlar. Bu, kaydırma etkinliklerinin eşzamansız olarak sunulması nedeniyle kaydırmayla senkronize olan ve kaydırmaya dayalı, yüksek performanslı animasyonların oluşturulmasını zorlaştırır ve ana iş parçacığında olması nedeniyle genellikle olumsuzluğa yol açar.
Ancak tarayıcılara eklenen yeni CSS ve kullanıcı arayüzü özelliklerinin bir parçası olarak, artık bildirim temelli kaydırmaya dayalı animasyonlar oluşturabilirsiniz. Mevcut Web Animasyonları API'si (WAAPI) ve CSS Animations API ile entegre olan yeni kavramlar olan Kaydırma Zaman Çizelgeleri ve Görüntüleme Zaman Çizelgeleri sayesinde, artık sadece birkaç satır kod girerek ana iş parçacığının tamamında sorunsuz, kaydırmaya dayalı animasyonlar elde edebilirsiniz. Bu örnek olayda, Tokopedia, redBus ve Policybazaar'ın bu yeni özellikten nasıl yararlandığını keşfedin.
Tokopedia
Tokopedia, sayfa performansını optimize etmek ve e-ticaret dönüşüm hunisi genelinde genel göz atma deneyimini geliştirmek için önceki özel JavaScript uygulamalarını Kaydırma tabanlı animasyonlarla değiştirdi.
Geleneksel JavaScript kaydırma etkinliklerine kıyasla kod satırlarımızı% 80'e kadar azaltmayı başardık ve kaydırma sırasında ortalama CPU kullanımının% 50'den% 2'ye düştüğünü gözlemledik. Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia
Kod
Aşağıdaki uygulamada, CSS animasyonunun ilerleme durumunu kontrol etmek amacıyla anonim kaydırma ilerleme durumu zaman çizelgesi ayarlamak için scroll() işlevi kullanılır. Üstteki yapışkan çubuğun görünürlüğü, tanımlanan animationRange içindeki kaydırma konumuna göre değişir.
const toggleBar = keyframes({
to: { height: 48 },
});
export const cssWrapper = css({
position: 'fixed',
left: 0,
width: '100vw',
pointerEvents: 'none',
marginTop: 120,
height: 0,
overflow: 'hidden',
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
animation: `${toggleBar} linear both`,
animationTimeline: 'scroll()',
animationRange: '20px 70px',
});
redBus
redBus'ın yapılacaklar açılış sayfasında mobil ve masaüstü için farklı animasyonları bulunuyor. Bu sayfa, dönüşüm hunisinin tüm kullanıcılarına dönüşüm hunisinin başında gösteriliyor. Kaydırma odaklı animasyonlar sayesinde, aynı etkiyi elde etmek için bu özel JavaScript uygulamalarını CSS ile değiştirebildiler.
Kullanım alanları
Resim Gösterme (mobil için) ve Kapak Akışı (Masaüstü için) içeren Fotoğraf Galerisi.
Kod (Mobil)
Önceki örnekte Tokopedia, anonim kaydırma ilerlemesi zaman çizelgesini kullandı. Aşağıdaki kodda redBus, adlandırılmış görüntüleme ilerleme zaman çizelgesini kullanır. Animasyon, öğenin en yakın üst kaydırma çubuğu (bu örnekte fotoğraf galerisi kaydırma çubuğu) içinde, tanımlanmış animation-range içindeki <img> öğesinin opacity ve clip-path öğelerini değiştirir.
const reveal = keyframes`
from {
opacity: 0;
clip-path: inset(45% 20% 45% 20%);
}
to {
opacity: 1;
clip-path: inset(0% 0% 0% 0%);
}`
const CardImage = styled.div`
width: 100%;
height: 100%;
img {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 100%;
width: 100%;
object-fit: cover;
view-timeline-name: --revealing-image;
view-timeline-axis: block;
/* Attach animation, linked to the View Timeline */
animation: linear ${reveal} both;
animation-timeline: --revealing-image;
/* Tweak range when effect should run*/
animation-range: entry 25% cover 50%;
}
`;
Daha iyi deneyimle performansın mükemmel bir karışımı olan ve SEO için Sayfa Deneyimi sinyallerimizi güçlendirdiği için bu özelliği görmekten çok mutluyuz. Üstelik, minimum öğrenme eğrisi bunu her e-ticaret web sitesinde olmazsa olmaz bir özellik haline getirir. Ayrıca, daha fazla kullanıcı yolculuğu için SDA'dan yararlanmak amacıyla diğer ekiplerden olumlu geri bildirimler ve destek aldık. Amit Kumar, Kıdemli Mühendislik Yöneticisi, redBus.
Politika pazarı
Sigorta planlarının karşılaştırılması, karar alma süreçlerine yön vermek için kullanıcıların gerçekleştirdiği tekrarlanan temel bir işlemdir. Policybazaar, kaydırmaya dayalı animasyonlar kullanarak kullanıcının tabloyu kaydırmasına yanıt olarak düşük öncelikli öğelerin boyutunu küçülttü. Bu yöntem, hem sorunsuz bir kaydırma deneyimi hem de okunabilirliği iyileştirdi.
Kaydırmayla çalışan animasyonlar sayesinde, kullanıcının planları karşılaştırabilmesi için görüntü alanı alanını en üst düzeye çıkarmayı başardık. Bu da, odaklanmış ve düzenli bir okuma deneyimi sağladı.Rishabh Mehrotra, Head of Life for Life Insurance BU, PolicyBazaar.
animate-timeline.Kod
Tokopedia'dan alınan önceki örneğine benzer şekilde Policybazaar, CSS animasyonunun ilerleme durumunu kontrol etmek için anonim kaydırma ilerleme durumu zaman çizelgesi ayarlamak için scroll() işlevini kullanıyor. Bu örnekte, yazı tipi boyutu küçültülüp tanımlanan animation-range içindeki kaydırma konumuna göre başlık soluklaştırılır.
@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}
@keyframes move-and-fade-header {
to {
translate: 0% -5%;
top:103px;
}
}
@keyframes shrink-name {
to {
font-size: 1.5rem;
}
}
Kullanıcı yolculuğunda ortak bir kalıp olarak kaydırmaya dayalı animasyonlar
Öne çıkan e-ticaret şirketlerinin tümü, kart içeren sayfalarda kaydırmayla yönelik animasyonlar kullandı ve kullanıcıların dikkatini çekmek için kartlardan animasyon hazırladı . Aşağıdaki örneklerde, kullanıcı yolculuğunun farklı bölümlerindeki kartlar üzerindeki kaydırma efektleri gösterilmektedir. Bu işlem genellikle, aşağıdaki CSS snippet'inde gösterildiği gibi, özel CSS animasyonunun ilerleme durumunu kontrol etmek için anonim görüntüleme ilerleme durumu zaman çizelgesi kullanılarak gerçekleştirilir.
@keyframes animate-in {
0% { opacity: 0; transform: translateY(10%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
0% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10%); }
}
.flyin_animate {
animation: animate-in linear forwards;
animation-timeline: view();
animation-range: entry;
}
redBus (Ana sayfa)
Policybazaar (Ürün Listeleme Sayfası)
Tokopedia (Ürün Ayrıntıları Sayfası)
Scroll-driven Animations API'yi kullanırken dikkat edilmesi gerekenler
Desteklenmeyen tarayıcılar için, kaydırmaya dayalı animasyonlara çoklu dolgu yapmak mümkündür (örneğin, Kaydırma zaman çizelgesi çoklu dolgusu). Aksi takdirde, çerçevenizin çerçevenizle birlikte iyi çalıştığından ve çoklu dolguyu kullanan tarayıcıların animasyon hatası veya kötü deneyimler yaşamadığından emin olmak için ek testler yapmanız gerekir.
CSS'de, kaydırmaya dayalı animasyonları kullanmadan önce animasyon zaman çizelgesinin desteklenip desteklenmediğini test etmek için @supports kullanabilirsiniz. Örneğin:
@supports (animation-timeline: scroll()) {
}
Kaynaklar
- Kaydırma odaklı animasyon demoları
- Kaydırma odaklı animasyonlarla kaydırma sırasında öğelere animasyon ekleme
- Codelab: CSS'de kaydırmaya dayalı animasyonları kullanmaya başlama
- Chrome Uzantısı: Kaydırma tabanlı animasyon hata ayıklayıcı
- Kaydırma zaman çizelgesi Polyfill
- Bir hatayı mı yoksa yeni bir özelliği mi bildirmek istiyorsunuz? Görüşlerinizi almak istiyoruz!
E-ticaret şirketlerinin, Görüntüleme Geçişleri, Popover, Kapsayıcı Sorguları ve has() seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığının anlatıldığı bu serideki diğer makaleleri inceleyin.