Ö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); }