Herhangi bir JavaScript olmadan CSS'de mümkün olan bazı kaydırma animasyonları vardır. Açıkça CSS büyüsü olan Kaydırma Göstergesi ile ilgili bölüme bakın. Ancak JavaScript tarafından sağlanan bir parça bilgi ile doğrudan CSS'de çok sayıda kaydırma animasyonu yapabiliriz: sayfanın ne kadar uzağa kaydırıldığı.
Öyleyse bunu yoldan çekelim. Tek satırlık bir JavaScript ile, kaydırılan sayfanın yüzdesini bilen bir CSS özel özelliği ayarlayabiliriz:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Artık --scrollCSS'de kullanabileceğimiz bir değerimiz var .
Bu numara, CSS hile ustası Scott Kellum sayesinde geliyor!
İlk başta bu değeri kullanmadan bir animasyon oluşturalım. Bu, sonsuza kadar dönecek ve dönecek bir SVG öğesi için basit bir dönen animasyondur:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )İşte hile geliyor! Şimdi bu animasyonu durduralım. Bir süre boyunca canlandırmak yerine animation-delay, sayfa kaydırıldıkça ayarını yaparak kaydırma konumu aracılığıyla onu canlandıracağız . Eğer animation-duration1s, sayfanın bütün uzunluğu kaydırma olduğunu araçtır. animasyonun bir yinelemesidir.
svg ( position: fixed; /* make sure it stays put so we can see it! */ animation: rotate 1s linear infinite; animation-play-state: paused; animation-delay: calc(var(--scroll) * -1s); ) Değiştirmeyi deneyin animation-durationTo 0.5s. Bu, iki animasyonun animation-delaymatematikle tamamlanabilmesini sağlar .
Scott, orijinal demosunda şunu da belirtti:
animation-iteration-count: 1; animation-fill-mode: both;Bazı "aşma" tuhaflıklarından sorumluydu ve bunu özellikle kısa görüş alanlarında da gördüğümü söyleyebilirim, bu yüzden bunları da ayarlamaya değer.
Scott ayrıca kaydırmayla ilgili animasyon özelliklerini :root ()kendi üzerinde ayarladı , yani sayfadaki tüm animasyonları aynı anda kontrol edebilir. İşte aynı anda üç animasyonu kontrol eden demosu: