Özet - Kaydırma hikayesi

Kaydırma tabanlı animasyonlarla hikaye anlatımı kurarsın.

Kaydırma hikayesinin araçları

Bu bölümde dört aracı bir araya getirdin. animation-timeline, animasyonu bir zaman akışına bağlar; scroll() kaydırma konumunu, view() öğenin görünüm alanındaki konumunu kullanır. animation-range ise animasyonun başlangıç ve bitiş aralığını belirler.

Bunlara scroll-snap-type ve scroll-snap-align eklenince kaydırma hikayeleri, ilerleme çubukları ve çıtaya oturan galeriler kurabilirsin. Hiç JavaScript yazmadan.

Kaydırma hikayesi nasıl kurulur?

Bir kaydırma hikayesi üç parçadan oluşur. Önce animation-timeline: scroll(root) ile sayfanın kök kaydırmasını seçersin. Sonra @keyframes ile her sahnenin görsel değişimini tanımlarsın.

Son olarak animation-range ile her sahnenin kaydırma aralığını belirlersin; böylece kaydırma 30%-60% arası: kart döner gibi bölümler kurarsın. Sahne sayısı arttıkça hikaye zenginleşir.

Uygulama Sayfanın üstündeki ilerleme çubuğu

İki bölüm yaz. Birincisi, from karesinde transform: scaleX(0) ve to karesinde transform: scaleX(1) bildirimleri olan bir @keyframes bölümü (herhangi bir ad). İkincisi, .bar seçicisi için bir CSS bölümü; bu bölümde transform-origin: left ve animation-timeline: scroll(root) bildirimleri bulunsun.

Örnek çözümü göster

/* sayfanın üstündeki ilerleme çubuğu */
@keyframes grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.bar {
  transform-origin: left;
  animation: 1s linear grow;
  animation-timeline: scroll(root);
}

Uygulama Yatay çıtaya oturan galeri

İki bölüm yaz. Birincisi, .gallery seçicisi için bir CSS bölümü; bu bölümde scroll-snap-type: x mandatory bildirimi bulunsun. İkincisi, .gallery > * seçicisi için bir CSS bölümü; bu bölümde scroll-snap-align: center bildirimi bulunsun.

Örnek çözümü göster

/* yatay çıtaya oturan galeri */
.gallery {
  scroll-snap-type: x mandatory;
}
.gallery > * {
  scroll-snap-align: center;
}

Kendini test et

Kavramı anlamıyla eşleştir

scroll()

Kaydırma konumuna bağlı akış
view()

Öğenin görünürlüğüne bağlı akış
animation-range

Başlangıç ve bitiş aralığı
scroll-snap-type

Eksen ve davranış
animation-timeline

Animasyonu akışa bağlar

İlerleme çubuğu akışını yaz

/* sayfa kökü kaydırması */
.bar {
  animation: 1s linear grow;
  animation-timeline: scroll(____);
}

Cevabı göster

/* sayfa kökü kaydırması */
.bar {
  animation: 1s linear grow;
  animation-timeline: scroll(root);
}

Sıradaki ders: Anchor positioning nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler