Quelles sont les nouveautés des animations liées au défilement ?
Les animations liées au défilement permettent d'ajouter de l'interactivité et de l'intérêt visuel à votre site Web ou application Web en fonction de la position de défilement de l'utilisateur. Cela peut être un excellent moyen de maintenir l'intérêt des utilisateurs et de rendre votre site Web plus attrayant visuellement.
Auparavant, le seul moyen de créer des animations liées au défilement était de répondre à l'événement de défilement sur le thread principal. Cela a entraîné deux problèmes majeurs:
- Le défilement s'effectue sur un thread distinct, ce qui permet de diffuser les événements de défilement de manière asynchrone.
- Les animations du thread principal sont soumises à des à-coups.
Cela rend la création d'animations performantes liées au défilement et synchronisées avec le défilement impossible ou très difficile.
Nous lançons désormais un nouvel ensemble d'API compatibles avec les animations liées au défilement, que vous pouvez utiliser à partir de CSS ou de JavaScript. L'API tente d'utiliser le moins de ressources de thread principal possible, ce qui rend les animations liées au défilement beaucoup plus faciles à implémenter et plus fluides. L'API des animations liées au défilement est actuellement compatible avec les navigateurs suivants:
Cet article compare la nouvelle approche à la technique JavaScript classique pour montrer à quel point la nouvelle API offre des animations facilitées et fluides basées sur le défilement.
Comparaison entre l'API CSS et la version classique de JavaScript pour les animations liées au défilement
L'exemple de barre de progression suivant est créé à l'aide de techniques JavaScript de classe.
Le document répond à chaque fois que l'événement scroll se produit pour calculer le pourcentage de scrollHeight que l'utilisateur a fait défiler.
document.addEventListener("scroll", () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("progress").style.width = scrolled + "%";
})
La démonstration suivante présente la même barre de progression en utilisant la nouvelle API avec CSS.
@keyframes grow-progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
#progress {
animation: grow-progress auto linear forwards;
animation-timeline: scroll(block root);
}
La nouvelle fonctionnalité CSS animation-timeline convertit automatiquement une position dans une plage de défilement en un pourcentage de progression, ce qui fait toute la charge de travail.
Voici maintenant la partie intéressante : disons que vous avez implémenté un calcul super lourd sur les deux versions du site Web qui consommerait la plupart des ressources du fil de discussion principal.
function someHeavyJS(){
let time = 0;
window.setInterval(function () {
time++;
for (var i = 0; i < 1e9; i++) {
result = i;
}
console.log(time)
}, 100);
}
Comme vous vous en doutez peut-être, la version JavaScript classique devient saccadée et lente en raison de la jonction des ressources de thread principale. En revanche, la version CSS n'est pas du tout affectée par les tâches JavaScript lourdes et peut répondre aux interactions de défilement de l'utilisateur.
L'utilisation du processeur est complètement différente dans les outils de développement, comme illustré dans les captures d'écran suivantes.
La démonstration suivante présente une application d'animation liée au défilement créée par CyberAgent. Comme vous pouvez le voir, la photo apparaît en fondu lorsque vous faites défiler l'écran.
Comparaison entre l'API JavaScript pour les animations liées au défilement et la version JavaScript classique
L'avantage de la nouvelle API ne se limite pas aux CSS. Vous pouvez également créer des animations fluides liées au défilement à l'aide de JavaScript. Examinez l'exemple suivant:
const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
{
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
fill: 'forwards',
timeline: new ScrollTimeline({
source: document.documentElement,
}),
}
);
Vous pouvez ainsi créer la même animation de barre de progression que dans la démo CSS précédente, en utilisant uniquement JavaScript. La technologie sous-jacente est la même que la version CSS. L'API tente d'utiliser le moins de ressources de thread principal possible, ce qui rend les animations beaucoup plus fluides que l'approche JavaScript classique.
Par ailleurs, cette nouvelle API fonctionne conjointement avec l'API Web Animations (WAAPI) et l'API CSS Animations existantes pour activer les animations déclaratives basées sur le défilement.
Autres démonstrations et ressources
Vous pouvez consulter les différentes implémentations d'animations liées au défilement sur ce site de démonstration. Vous pouvez y comparer des démonstrations utilisant ces nouvelles API CSS et JavaScript.
Pour en savoir plus sur les nouvelles animations liées au défilement, consultez cet article et la conférence I/O 2023.