Kaydırmayla çalışan animasyonlar, web'de yaygın olarak kullanılan bir kullanıcı deneyimi modelidir. Kaydırmaya dayalı bir animasyon, bir kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Yani siz yukarı veya aşağı kaydırdıkça bağlantılı animasyon doğrudan yanıtta ileri veya geri sarar. Paralaks arka plan resimleri veya siz kaydırırken hareket eden okuma göstergeleri gibi efektler buna örnek gösterilebilir.
Geliştiriciler, ana iş parçacığındaki kaydırma etkinliklerine yanıt vermek için genellikle JavaScript kullanarak kaydırma odaklı animasyonlar oluşturuyordu. Bu durum, kaydırma etkinliklerinin eşzamanlı olarak yayınlanmaması nedeniyle kaydırmayla senkronize çalışan, performanslı kaydırma animasyonlarının oluşturulmasını zorlaştırır ve genellikle ana iş parçacığında olması nedeniyle takılmalara neden olur.
Ancak tarayıcılara eklenen yeni CSS ve kullanıcı arayüzü özelliklerinin bir parçası olarak artık açıklayıcı kaydırma odaklı animasyonlar oluşturabilirsiniz. Mevcut Web Animasyonları API'si (WAAPI) ve CSS Animasyonları API ile entegre olan yeni kavramlar olan Kaydırma Zaman Çizelgeleri ve Görüntüleme Zaman Çizelgeleri sayesinde artık sadece birkaç kod satırı kullanarak ana iş parçacığında çalışan, kaydırma odaklı ve akıcı animasyonlar elde edebilirsiniz. Bu örnek olayda, Tokopedia, redBus ve Policybazaar'ın bu yeni özellikten nasıl yararlandığını öğrenin.
Tokopedia
Tokopedia, sayfa performansını optimize etmek ve e-ticaret dönüşüm hunisindeki genel tarama deneyimini iyileştirmek için önceki özel JavaScript uygulamalarını kaydırma destekli animasyonlarla değiştirdi.
Geleneksel JavaScript kaydırma etkinliklerini kullanmaya kıyasla kod satırlarımızın% 80'ini 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, Tokopedia Kıdemli Yazılım Mühendisi
Kod
Aşağıdaki uygulama, CSS animasyonunun ilerleme durumunu kontrol etmek üzere anonim bir kaydırma ilerleme zaman çizelgesi ayarlamak için scroll()
işlevini kullanır. Üst 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, dönüşüm hunisinin başlarında tüm kullanıcılara gösterilen yapılacaklar açılış sayfasında mobil cihazlar ve masaüstü bilgisayarlar için farklı animasyonlar kullanır. Kaydırma odaklı animasyonlarla, bu özel JavaScript uygulamalarını CSS ile değiştirerek de aynı etkiyi elde etmeyi başardılar.
Kullanım alanları
Resim Gösterme (mobil için) ve Kapak Akışı (Masaüstü için) ile Fotoğraf Galerisi.
Kod (Mobil)
Önceki örnekte Tokopedia, anonim kaydırma ilerleme zaman çizelgesini kullanmıştır. Aşağıdaki kodda redBus, adlandırılmış görüntüleme ilerleme zaman çizelgesini kullanır. Animasyon, öğenin en yakın üst öğesi olan kaydırma çubuğunda (bu örnekte fotoğraf galerisi kaydırma çubuğu) tanımlanan animation-range
içinde <img>
öğesinin opacity
ve clip-path
değerlerini 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%;
}
`;
Performansı daha iyi deneyimle mükemmel bir şekilde birleştirdiği ve SEO için Sayfa Deneyimi sinyallerimizi güçlendirdiği için bu özelliği görmekten mutluluk duyuyoruz. Üstelik minimum öğrenme eğrisi, her e-ticaret web sitesi için vazgeçilmez bir özellik haline geliyor. Ayrıca, daha fazla kullanıcı yolculuğu için SDA'dan yararlanmak üzere diğer ekiplerden olumlu geri bildirimler ve destek aldık.— Amit Kumar, Kıdemli Mühendislik Müdürü, redBus.
Policybazaar
Sigorta planlarını karşılaştırmak, kullanıcıların karar verme süreçlerine rehberlik etmek için tekrar tekrar gerçekleştirdikleri önemli 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 da okunabilirliği iyileştirirken zarif bir kaydırma deneyimiyle sonuçlandı.
Kaydırma odaklı animasyonlarla, kullanıcının planları karşılaştırması için görüntü alanı alanını en üst düzeye çıkararak odaklanmış ve dağınık olmayan bir okuma deneyimi sağladık.—Rishabh Mehrotra, PolicyBazaar'da Hayat Sigortası BU'nun Tasarım Müdürü.
Kod
Tokopedia'daki önceki örneğe benzer şekilde Policybazaar da CSS animasyonunun ilerleme durumunu kontrol etmek için scroll()
işlevini kullanarak anonim kaydırma ilerleme zaman çizelgesi ayarlıyor. Bu durumda, tanımlanan animation-range
içindeki kaydırma konumuna göre yazı tipi boyutunu küçültme ve başlığı soldurma.
@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ğu boyunca ortak bir kalıp olarak kaydırmaya dayalı animasyonlar
Öne çıkarılan tüm e-ticaret şirketleri, kartların yer aldığı sayfalarda kaydırmayla çalışan animasyonlar kullandı. Bu animasyonlar, kullanıcıların dikkatini kartlara çekmek için kartları hareketlendirdi. Aşağıdaki örneklerde, kullanıcı yolculuğunun farklı bölümlerindeki kartlarda kaydırma efektleri gösterilmektedir. Bu, genellikle özel CSS animasyonunun ilerleme durumunu kontrol etmek için aşağıdaki CSS snippet'inde gösterildiği gibi bir anonim görüntüleme ilerleme zaman çizelgesi kullanılarak yapılır.
@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ı)
Kaydırma Destekli Animasyonlar API'sini kullanırken dikkat edilmesi gereken noktalar
Kaydırma odaklı animasyonlar, desteklemeyen tarayıcılar için polyfill ile doldurulabilir (ör. Kaydırma zaman çizelgesi polyfill'i). Bunu yaparsanız bu, çerçevenizin çerçevenizle birlikte iyi çalıştığından ve çoklu dolguyu kullanan tarayıcılarda animasyon hatası veya kötü bir deneyim yaşanmadığından emin olmak için ek testler gerekir.
Kaydırmayla çalışan animasyonları kullanmadan önce CSS'de animation-timeline desteğini test etmek için @supports
değerini kullanabilirsiniz. Örneğin:
@supports (animation-timeline: scroll()) {
}
Kaynaklar
- Kaydırmayla çalışan animasyon demoları
- Kaydırma odaklı animasyonlarla kaydırma sırasında öğeleri canlandırma
- Codelab: CSS'de kaydırmaya dayalı animasyonları kullanmaya başlama
- Chrome Uzantısı: Kaydırma denetimli animasyon hata ayıklayıcı
- Kaydırma-zaman çizelgesi Çoklu Doldurma
- Hata veya yeni özellik bildirmek istiyor musunuz? Görüşlerinizi almak istiyoruz.
Bu serinin, Görüntü Geçişleri, Pop-up, Kapsayıcı Sorguları ve has()
seçici gibi yeni CSS ve kullanıcı arayüzü özelliklerinden e-ticaret şirketlerinin nasıl yararlandığından bahseden diğer makalelerini inceleyin.