Ada beberapa animasi gulir yang dimungkinkan di CSS tanpa JavaScript sama sekali. Lihat saja bab tentang Indikator Gulir, yang jelas merupakan keajaiban CSS. Tetapi kita dapat melakukan banyak pekerjaan animasi gulir secara langsung di CSS hanya dengan sedikit informasi yang disediakan oleh JavaScript: seberapa jauh halaman telah di-scroll.
Jadi mari kita singkirkan itu. Dengan satu baris JavaScript, kita dapat menyetel properti khusus CSS yang mengetahui persentase halaman yang di-scroll:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Sekarang kita memiliki --scrollnilai yang bisa kita gunakan di CSS.
Trik ini dilakukan oleh Scott Kellum yang merupakan ahli tipuan CSS!
Mari kita siapkan animasi tanpa menggunakan nilai itu pada awalnya. Ini adalah animasi berputar sederhana untuk elemen SVG yang akan berputar dan berputar selamanya:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Inilah triknya! Sekarang mari kita jeda animasi ini. Daripada menganimasikannya selama jangka waktu tertentu, kami akan menganimasikannya melalui posisi gulir dengan menyesuaikannya animation-delaysaat laman bergulir. Jika animation-durationnilainya 1, itu berarti menggulir seluruh panjang halaman. adalah salah satu iterasi dari animasi.
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); ) Coba ubah animation-durationmenjadi 0.5s. Itu memungkinkan dua animasi bisa diselesaikan dengan animation-delaymatematika.
Scott mencatat dalam demo aslinya yang juga mengatur:
animation-iteration-count: 1; animation-fill-mode: both;Menyebabkan beberapa keanehan "melampaui batas" dan saya dapat membuktikan bahwa saya telah melihatnya juga, terutama pada viewports yang pendek, jadi ada baiknya menyetel ini juga.
Scott juga menyetel properti animasi terkait gulir :root ()itu sendiri, artinya properti ini dapat mengontrol semua animasi di halaman sekaligus. Inilah demonya yang mengontrol tiga animasi secara bersamaan: