Ci sono alcune animazioni di scorrimento che sono possibili in CSS senza alcun JavaScript. Basta guardare il capitolo sull'indicatore di scorrimento, che è chiaramente magia CSS. Ma possiamo fare un sacco di lavoro di animazione di scorrimento direttamente in CSS con solo un po 'di informazioni fornite da JavaScript: fino a che punto è stata spostata la pagina.
Quindi togliamolo di mezzo. Con un one-liner JavaScript, possiamo impostare una proprietà personalizzata CSS che conosce la percentuale di scorrimento della pagina:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Ora abbiamo --scrollcome valore che possiamo usare nel CSS.
Questo trucco arriva da Scott Kellum, che è un vero maestro dei trucchi CSS!
Impostiamo inizialmente un'animazione senza utilizzare quel valore. Questa è una semplice animazione rotante per un elemento SVG che girerà e girerà per sempre:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Ecco il trucco! Ora mettiamo in pausa questa animazione. Piuttosto che animarlo per un periodo di tempo, lo animeremo tramite la posizione di scorrimento regolando il animation-delaymentre la pagina scorre. Se animation-durationè 1s, significa scorrere l'intera lunghezza della pagina. è un'iterazione dell'animazione.
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); ) Prova a cambiare animation-durationin 0.5s. Ciò consente di completare due animazioni con la animation-delaymatematica.
Scott ha notato nella sua demo originale che anche l'impostazione:
animation-iteration-count: 1; animation-fill-mode: both;Ha tenuto conto di alcune stranezze di "overshoot" e posso attestare di averlo visto anche io, in particolare su viewport brevi, quindi vale la pena impostare anche questi.
Scott ha anche impostato le proprietà di animazione relative allo scorrimento su :root ()se stesso, il che significa che potrebbe controllare tutte le animazioni sulla pagina contemporaneamente. Ecco la sua demo che controlla tre animazioni contemporaneamente: