Bu sayfa, Cloud Translation API ile çevrilmiştir.

Kaydırma odaklı animasyonlarla ilgili örnek olaylar

Swetha Gopalakrishnan

Saurabh Rajpal

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.

Tarayıcı Desteği

Kaynak

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

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

ziyaret edin.

Kullanıcı kaydırmasına göre üstteki yapışkan çubuğun görünürlüğünün animasyonlu olarak değişmesi dokunun.

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ü).

Kaydırma odaklı animasyon görseli, redBus'ta resim yükleme efektini gösteriyor fotoğraf galerisini etkinleştirmelisiniz.

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.

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)

ziyaret edin.

Yatırım ve Hayat sekmesindeki karşılaştırma planı tablosunda

kaydırma odaklı animasyon 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)

redBus'ın "Yapılacaklar" listesinde ürün kartlarını yüklemek için kaydırmaya dayalı animasyon efekti açılış sayfanızı

ziyaret edin.

Policybazaar (Ürün Listeleme Sayfası)

Yatırım ve yaşam iş kolunda ürün kartlarının ilerlemesine ve kararmasına neden olan, kaydırmaya dayalı animasyon (İş kolu).

Tokopedia (Ürün Ayrıntıları Sayfası)

Ürünler arasında gezinirken kararma, belirme animasyonu listelenmektedir.

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.