View function
view() fonksiyonu ile görünürlük tabanlı animasyonu öğrenirsin.
view() işlevi ne yapar?
view() işlevi, animasyonu öğenin görünüm alanındaki konumuna bağlar. Öğe görünüm alanına girerken, içinden geçerken ya da çıkarken animasyon ilerler. Bu, scroll() işlevinden farklıdır; çünkü scroll() kapsayıcının kaydırma konumunu kullanır.
Örneğin bir kart görünüm alanına girince silikten belirgin renge döner. Bu etki daha önce JavaScript ile IntersectionObserver ile yapılırdı; artık yalnızca CSS ile mümkün.
view() bağımsız değişkenleri
view() işlevi iki bağımsız değişken alır: eksen (axis) ve iç boşluk (inset). Eksen, block ya da inline olabilir; varsayılan block'tur.
İç boşluk, görünüm kutusunun kenarlarını bir uzunluk ya da yüzdeyle daraltır ya da genişletir. Örneğin view(block 20%), animasyonu öğe üst kenardan %20 içeri girdiğinde başlatır.
view-timeline-name ile adlandırma
Bazen zaman akışını bir öğe üzerinde tanımlayıp başka bir öğeye bağlamak istersin. Bunun için hedef öğeye view-timeline-name özelliğiyle bir ad verirsin. Ardından animasyonlu öğede animation-timeline'ı bu ada ayarlarsın.
Örneğin bir görseli izlemek için view-timeline-name: photo yazarsın; sonra başka bir öğede animation-timeline: photo ile bu akışı kullanırsın. Böylece tek akış, birden çok öğeyi eş zamanlı sürer.
Uygulama view() ile görünür olunca beliren animasyon
İ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: view() bildirimi bulunsun.
Örnek çözümü göster
/* görünür olunca beliren kart */
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
animation: 1s linear fade;
animation-timeline: view();
}Kendini test et
-
view() işlevi animasyonu neye göre sürer?
- Belge geneli kaydırma konumuna
- Fare işaretçisinin konumuna
- Öğenin görünüm alanındaki konumuna
- Belge zaman akışına
Cevabı göster
Öğenin görünüm alanındaki konumuna — Doğru. view() animasyonu öğenin görünüm alanındaki konumuna göre ilerler.
-
İç boşluk değerini yaz
/* görünüm alanı içinden 15% */ animation-timeline: view(block ____);Cevabı göster
/* görünüm alanı içinden 15% */ animation-timeline: view(block 15%);