Certaines animations de défilement sont possibles en CSS sans aucun JavaScript. Regardez simplement le chapitre sur l'indicateur de défilement, qui est clairement de la magie CSS. Mais nous pouvons faire beaucoup de travail d'animation de défilement directement en CSS avec juste une petite information fournie par JavaScript: jusqu'où la page a défilé.
Alors débarrassons-nous de cela. Avec un JavaScript one-liner, nous pouvons définir une propriété personnalisée CSS qui connaît le pourcentage de la page défilée:
window.addEventListener('scroll', () => ( document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight)); ), false);Maintenant, nous avons --scrollcomme valeur que nous pouvons utiliser dans le CSS.
Cette astuce vient de Scott Kellum qui est tout à fait le maître de la supercherie CSS!
Configurons une animation sans utiliser cette valeur au début. Il s'agit d'une simple animation de rotation pour un élément SVG qui tournera et tournera pour toujours:
svg ( display: inline-block; animation: rotate 1s linear infinite; ) @keyframes rotate ( to ( transform: rotate(360deg); ) )Voici le truc! Maintenant, mettons cette animation en pause. Plutôt que de l'animer sur une période de temps, nous l'animerons via la position de défilement en ajustant le à animation-delaymesure que la page défile. Si la valeur animation-durationest 1, cela signifie faire défiler toute la longueur de la page. est une itération de l'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); ) Essayez de changer le animation-durationen 0.5s. Cela permet à deux animations peuvent être complétées avec les animation-delaymathématiques.
Scott a noté dans sa démo originale que cela définissait également:
animation-iteration-count: 1; animation-fill-mode: both;Expliqué pour une certaine bizarrerie de «dépassement» et je peux attester que je l'ai vu aussi, en particulier sur les fenêtres courtes, donc cela vaut la peine de les définir aussi.
Scott a également défini les propriétés d'animation liées au défilement sur :root ()lui - même, ce qui signifie qu'il pouvait contrôler toutes les animations de la page à la fois. Voici sa démo qui contrôle trois animations simultanément: