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ı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ş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 açılan 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 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 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, yapılacaklar açılış sayfasında mobil ve masaüstü için farklı animasyonlara sahiptir. Bu animasyonlar, dönüşüm hunisinin başlarında tüm kullanıcılara gösterilir. 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.

Kod (Mobil)

Önceki örnekte Tokopedia, anonim kaydırma ilerleme zaman çizelgesini kullanmıştır. Aşağıdaki kodda redBus, adlandırılmış görünüm 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. Ü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ı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ı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ı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'nın önceki örneğine benzer şekilde Policybazaar, scroll() işlevini kullanarak CSS animasyonunun ilerlemesini kontrol etmek için 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ğ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 anonim bir görünüm ilerleme 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ı)

Kaydırma Destekli Animasyonlar API'sini 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 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

• Kaydırmayla çalışan animasyon demoları
• Kaydırma odaklı animasyonlarla kaydırma sırasında öğeleri canlandırma
• Codelab: CSS'de kaydırmayla çalışan animasyonlarla çalışmaya 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ı ele alan bu serideki diğer makaleleri inceleyin.

• Web kullanıcı arayüzü özellikleri e-ticaret siteniz için neden önemlidir?
• Geçişler örnek olaylarını görüntüleme
• Popover API örnek olayları
• Kapsayıcı Sorguları örnek olayları
• :has() seçici örnek olaylarını