Υπάρχουν μερικές κινούμενες εικόνες κύλισης που είναι δυνατές στο CSS χωρίς καθόλου JavaScript. Απλώς ρίξτε μια ματιά στο κεφάλαιο του Scroll Indicator, που είναι σαφώς μαγικό CSS. Αλλά μπορούμε να κάνουμε πολλή εργασία animation κύλισης απευθείας στο CSS με μόνο λίγες πληροφορίες που παρέχονται από το JavaScript: πόσο μακριά έχει μετακινηθεί η σελίδα.
Ας το ξεφύγουμε λοιπόν. Με ένα JavaScript μιας γραμμής, μπορούμε να ορίσουμε μια προσαρμοσμένη ιδιότητα CSS που γνωρίζει το ποσοστό της σελίδας που έχει μετακινηθεί:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Τώρα έχουμε --scrollως αξία που μπορούμε να χρησιμοποιήσουμε στο CSS.
Αυτό το κόλπο έρχεται μέσω του Scott Kellum, ο οποίος είναι ο κύριος τεχνάτης της CSS!
Ας δημιουργήσουμε ένα κινούμενο σχέδιο χωρίς να χρησιμοποιήσουμε αυτήν την τιμή πρώτα. Πρόκειται για μια απλή κινούμενη κίνηση για ένα στοιχείο SVG που θα περιστρέφεται και θα περιστρέφεται για πάντα:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Εδώ έρχεται το κόλπο! Τώρα ας σταματήσουμε αυτό το κινούμενο σχέδιο. Αντί να το κινούμε για μια χρονική περίοδο, θα το κινούμε μέσω της θέσης κύλισης προσαρμόζοντας το animation-delayως κύλιση της σελίδας. Εάν animation-durationείναι το 1s, αυτό σημαίνει κύλιση σε όλο το μήκος της σελίδας. είναι μια επανάληψη του animation.
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); ) Δοκιμάστε να αλλάξετε το animation-durationσε 0.5s. Αυτό επιτρέπει δύο κινούμενα σχέδια μπορούν να ολοκληρωθούν με τα animation-delayμαθηματικά.
Ο Scott σημείωσε στην αρχική του επίδειξη ότι έθεσε επίσης:
animation-iteration-count: 1; animation-fill-mode: both;Αντιπροσώπευε κάποια περίεργη "υπερβολική λήψη" και μπορώ να βεβαιώσω ότι το έχω δει επίσης, ειδικά σε κοντινές θύρες προβολής, οπότε αξίζει να τα ρυθμίσουμε επίσης.
Ο Scott έθεσε επίσης τις ιδιότητες κινουμένων σχεδίων που σχετίζονται με την κύλιση από :root ()μόνη της, πράγμα που σημαίνει ότι θα μπορούσε να ελέγχει ταυτόχρονα όλα τα κινούμενα σχέδια στη σελίδα. Εδώ είναι το demo που ελέγχει ταυτόχρονα τρία κινούμενα σχέδια: