Scroll-driven animasyonlar

animation-timeline: scroll() ile kaydırma tabanlı animasyonu öğrenirsin.

Kaydırma tabanlı animasyon nedir?

Bir kaydırma tabanlı animasyon (scroll-driven animation), zamanla değil sayfanın kaydırma konumuyla ilerler. Okuyucu aşağı kaydırdıkça animasyon ilerler; yukarı kaydırınca geri sarar. Bunu sağlamak için animation-duration yerine animation-timeline özelliğini ayarlarsın.

Böylece JavaScript ile kaydırma dinleyicisi yazmana gerek kalmaz. Tarayıcı, animasyonun ilerlemesini kaydırma konumuna bağlar. Bu yöntem kaydırma hikayeleri, ilerleme çubukları ve görünür olunca beliren öğeler için idealdir.

animation-timeline özelliği

animation-timeline özelliği, animasyonun hangi zaman akışına bağlı olduğunu belirtir. Varsayılan değeri auto'dur; bu, belge zaman akışını (zaman temelli) kullanır.

Değeri scroll() işlevine ayarlayınca animasyon, kaydırma konumuna bağlanır. Bu özelliği animation kısa yazımından sonra yazmalısın; çünkü kısa yazım, animation-timeline'ı auto'ya sıfırlar. Böylece istediğin akış korunur.

scroll() varsayılan davranışı

scroll() işlevini bağımsız değişken olmadan çağırınca tarayıcı iki varsayılan uygular. Kaynak olarak en yakın kaydırılabilir atası seçilir; eksen olarak blok ekseni (dikey yön) kullanılır.

Böylece tek bir ekran yüksekliği kaydırma, animasyonun bir tam döngüsünü tamamlar. İç içe kaydırma alanların varsa scroll(root) ya da scroll(block nearest) gibi açık bağımsız değişkenler kullanırsın.

Uygulama Kaydırma ile opaklık animasyonu

İki bölüm yaz. Birincisi, from ve to karelerini içeren bir @keyframes bölümü (herhangi bir ad). İkincisi, herhangi bir seçici için bir CSS bölümü; bu bölümde animation-timeline: scroll() bildirimi bulunsun.

Örnek çözümü göster

/* kaydırma ile opaklık */
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal {
  animation: 1s linear fade;
  animation-timeline: scroll();
}

Kendini test et

Hangisi kaydırma tabanlı animasyonun belirgin özelliğidir?
- İlerleme kaydırma konumuna bağlıdır
- Yalnızca fareyle üzerine gelince başlar
- Sayfa yüklendiğinde bir kez oynar
- JavaScript ile elle tetiklenir
Cevabı göster

İlerleme kaydırma konumuna bağlıdır — Doğru. Kaydırma tabanlı animasyonun ilerlemesi kaydırma konumuna bağlıdır.

scroll() ile kaydırma akışı yaz

/* kaydırma zaman akışı */
.reveal {
  animation: 1s linear fade;
  animation-timeline: ____;
}

Cevabı göster

/* kaydırma zaman akışı */
.reveal {
  animation: 1s linear fade;
  animation-timeline: scroll();
}

Sıradaki ders: Scroll function

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler