Kaydırmaya dayalı animasyonlar web'de yaygın olarak kullanılan bir kullanıcı deneyimi kalıbıdır. Kaydırmaya dayalı animasyonu, bir kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Bunun anlamı şudur: Siz yukarı veya aşağı kaydırdıkça bağlantılı animasyon ileri veya geri teşvik edebilirsiniz. Paralaks arka plan gibi efektler buna örnek olarak gösterilebilir. kaydırırken hareket eden resimler veya okuma göstergeleri bulunur.
Geliştiriciler genellikle JavaScript kullanarak kaydırmaya dayalı animasyonlar oluştururlar kaydırma etkinliklerine yanıt vermek için kullanın. Bu da içerik üretmeyi zorlaştırıyor. yüksek performanslı kaydırmaya dayalı animasyonlar kaydırma etkinlikleri eşzamansız olarak yayınlanır ve bu etkinlikler genellikle olduğunu fark etmiş olabilirsiniz.
Ancak, yeni Tarayıcılarda açılan CSS ve kullanıcı arayüzü özellikleri, artık bildirimsel kaydırmaya dayalı animasyonlar oluşturun. Kaydırma Zaman Çizelgeleri ve Görünüm Özellikli Zaman çizelgeleri, mevcut projeyle entegre olan yeni kavramlar Web Animations API (WAAPI) ve CSS Animations API, artık ipeksi ve pürüzsüz ana iş parçacığında çalışan, kaydırmaya dayalı animasyonlar, girin. Bu örnek olay incelemesinde Tokopedia, redBus ve Policybazaar'ın bu yeni özellikten yararlanmaya başladılar.
Tokopedia
Tokopedia, önceki özel JavaScript uygulamalarını Sayfa performanslarını optimize etmek ve sayfa performansını iyileştirmek için kaydırmaya dayalı animasyonlara E-ticaret dönüşüm hunisinde genel olarak gezinme deneyiminin
ziyaret edin.Google Etiket Yöneticisi'ni kullanmaya kıyasla kod satırlarımızın% 80'ini olduğunu gözlemledik ve ortalama CPU kullanımının yüksek, orta kaydırma sırasında% 50'den% 2'ye düşürüldü— Andy Wihalim, Kıdemli Yazılım Mühendisi, Tokopedia
Kod
Aşağıdaki uygulamada, anonim kaydırmayı ayarlamak için scroll()
işlevi kullanılmaktadır
ilerleme zaman çizelgesi'ni seçin. İlgili içeriği oluşturmak için kullanılan
üst yapışkan çubuğun görünürlüğü,
animationRange
tanımlandı.
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, mobil ve masaüstü için farklı animasyonlara sahiptir. things-to-to-do (yapılacak şeyler) açılış sayfası erken bir aşamada yer alması fark etmez. Kaydırma odaklı animasyonlarla, yerine getirmesi için bu özel JavaScript uygulamalarını CSS ile aynı etkiyi yaratır.
Kullanım alanları
Resim Gösterme Özellikli Fotoğraf Galerisi ( mobil) ve Kapanış Akışı (önceki Masaüstü).
Kod (Mobil)
Önceki örnekte Tokopedia, anonim kaydırma ilerleme durumunu
zaman çizelgesi'ni inceleyin. Aşağıdaki kodda, redBus adlandırılmış görünüm ilerleme durumunu
zaman çizelgesi'ni inceleyin. Animasyon, <img>
öğesinin opacity
ve clip-path
öğelerini değiştirir
öğesi, tanımlı animation-range
içindeki öğenin en yakın
ancestor Scroller (bu örnekte fotoğraf galerisi kaydırıcısı).
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ın mükemmel bir karışımı olduğu için bu özelliği görmekten çok memnunuz. daha iyi deneyim sunarak SEO için Sayfa Deneyimi sinyallerimizi artırıyoruz. Üstünde minimum öğrenme eğrisi, her e-ticaret için vazgeçilmez bir unsur web sitesi. Diğer ekiplerden de olumlu geri bildirimler ve destek aldık. Daha fazla kullanıcı yolculuğu için SDA.— Amit Kumar, Kıdemli Mühendislik Yönetici, redBus.
Politika Pazarı
Sigorta planlarını karşılaştırma, kullanıcıların karar vermelerine yardımcı olmak için gerçekleştirdiği temel bir işlemdir. bu sürecin bir parçasıdır. Policybazaar, kaydırmaya dayalı animasyonlar kullanarak Kullanıcının tabloyu kaydırmasına yanıt olarak düşük öncelikli öğelerin boyutu. Bu hem de okunabilirliği iyileştirdi.
ziyaret edin.Kaydırmaya dayalı animasyonlarla, her bir doküman için görüntü alanı alanını kullanıcının planları karşılaştırmasını, böylece odaklanmış ve düzenli bir okuma yapmasını sağlar .—Rishabh Mehrotra, Genel Müdür Design for Life Insurance BU, PolicyBazaar (Yaşam Sigortası BU'su, PolicyBazaar)
animate-timeline
iş kolu).Kod
Tokopedia'dan önceki örneğine benzer şekilde, Policybazaar
Aşağıdakiler için anonim kaydırma ilerleme zaman çizelgesi ayarlamak üzere scroll()
işlevi
CSS animasyonunun ilerleme durumunu kontrol eder. Bu durumda, yazı tipi boyutu küçültülür.
belirlenen kaydırma konumuna göre başlığın boyutunu ve solukluğunu
animation-range
@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 çıkan e-ticaret şirketlerinin tümü, sayfalarda kaydırmaya dayalı animasyonlar kullandı içeren animasyonlar ekleyerek kullanıcının ilgisini çekmeyi başarabilirsiniz . İlgili içeriği oluşturmak için kullanılan Aşağıdaki örneklerde, kullanıcının farklı yerlerindeki kartlardaki kaydırma efektleri gösterilmektedir teşekkür ederiz. Bu genellikle anonim bir ilerleme durumu zaman çizelgesi kullanılarak gerçekleştirilir aşağıda gösterildiği gibi, özel CSS animasyonunun ilerleme durumunu kontrol etmek için CSS snippet'ini eklemeniz gerekir.
@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-od Animations API'yi kullanırken dikkat edilmesi gereken noktalar
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. Bu sayede, birlikte iyi çalıştığından emin olmak için ek testlere ihtiyaç çerçevesini ve çoklu dolguyu kullanan tarayıcıların animasyon ile karşılaşmadığını kötü deneyim anlamına gelir.
CSS'den animasyon zaman çizelgesi desteğini test etmek için @supports
kullanabilirsiniz
. Örneğin:
@supports (animation-timeline: scroll()) {
}
Kaynaklar
- Kaydırmaya dayalı animasyon demoları
- Kaydırmaya dayalı animasyonlarla kaydırma sırasında öğelere animasyon ekleme
- Codelab: CSS'de kaydırmaya dayalı animasyonları kullanmaya başlama
- Chrome Uzantısı: Kaydırma odaklı animasyon hata ayıklayıcı
- Kaydırma-zaman çizelgesi Çoklu Doldurma
- Hata veya yeni özellik bildirmek istiyor musunuz? Düşüncelerinizi öğrenmek 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ı anlatan bu serideki diğer makaleleri inceleyin.