Kaydırma odaklı animasyonlarla ilgili örnek olaylar

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

Kaydırmayla çalışan animasyonlar, web'de yaygın olarak kullanılan bir kullanıcı deneyimi modelidir. Kaydırma odaklı animasyon, kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Bu, siz yukarı veya aşağı kaydırırken bağlı animasyonun doğrudan yanıt olarak ileri veya geri sarmaladığı anlamına gelir. 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şturmuştur. 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.

Tarayıcı desteği

  • Chrome: 115.
  • Edge: 115.
  • Firefox: İşaretli.
  • Safari: Desteklenmez.

Kaynak

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

Kullanıcı kaydırma konumuna göre üst yapışkan çubuğun görünürlüğünü animasyonlu olarak değiştirme.

Kod

Aşağıdaki uygulamada, CSS animasyonunun ilerleme durumunu kontrol etmek için scroll() işlevi kullanılarak anonim kaydırma ilerleme zaman çizelgesi ayarlanmıştı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ı animasyonlar sayesinde, aynı efekti elde etmek için bu özel JavaScript uygulamalarını CSS ile değiştirdiler.

Kullanım alanları

Resim Gösterme (mobil cihazlar için) ve Kapak Akışı (masaüstü için) içeren fotoğraf galerisi.

redBus "Things To Do" fotoğraf galerisine resim yüklemek için kaydırmayla çalışan animasyonlu resim gösterme efekti.

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 ile daha iyi deneyimin mükemmel bir karışımı olan ve SEO için sayfa deneyimi sinyallerimizi artıran bu özelliği görmekten çok memnunuz. Ayrıca, minimum öğrenme eğrisi sayesinde her e-ticaret web sitesi için gereklidir. 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 Yöneticisi, 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ırma odaklı animasyonlar kullanarak kullanıcının tabloyu kaydırdığına yanıt olarak düşük öncelikli öğelerin boyutunu küçülttü. Bu sayede, okunabilirlik artarken zarif bir kaydırma deneyimi elde edildi.

Kaydırmayla çalışan animasyonlar sayesinde, 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'ın Hayat Sigortası BU Tasarım Müdürü.

Yatırım ve Emeklilik LOB'sinde (İş Kolu) karşılaştırma tablosunda kaydırmayla çalışan animasyon animate-timeline.

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ığın rengini 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ğunda ortak bir kalıp olarak kaydırmayla çalışan 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 aşağıdaki CSS snippet'inde gösterildiği gibi özel CSS animasyonunun ilerleme durumunu kontrol etmek için 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)

redBus "Things To Do" açılış sayfasında ürün kartlarını yüklemek için kaydırmayla çalışan animasyonlu uçma efekti.

Policybazaar (Ürün Listeleme Sayfası)

Yatırım ve Yaşam LOB'sinde (İş Kolu) ürün kartlarının kaydırmayla kontrol edilen animasyonlu şekilde açılması ve kapanması.

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

Listelenen ürünler arasında gezinirken kaybolma ve görünme animasyonu

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). Bu durumda, çerçevenizle birlikte iyi çalıştığından ve polyfill kullanan tarayıcıların animasyon hatası veya sarsıntılı deneyimler yaşamadığından emin olmak için ek testler yapmanız 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

Bu serinin, Görüntü Geçişleri, Popover, 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.