Cet article explore l'importance de prendre en compte les préférences des utilisateurs en matière d'animations sur les sites web, notamment grâce à la propriété CSS prefers-reduced-motion. Intégrée dans les navigateurs entre 2018 et 2020, cette préférence permet aux utilisateurs de réduire ou de supprimer les animations non essentielles, améliorant ainsi l'accessibilité pour ceux qui peuvent être gênés par les mouvements à l'écran. L'article explique comment utiliser cette propriété en CSS et JavaScript pour adapter les interfaces en fonction des préférences des utilisateurs, tout en fournissant des exemples de code pratiques.

L'article décrit le processus de recréation d'une animation P5.js de Rach Smith en utilisant CSS, en particulier la propriété offset-path. Initialement, l'auteur a tenté de suivre manuellement les positions et directions de chaque boîte dans l'animation, ce qui s'est avéré complexe. Cependant, il a découvert que l'utilisation de offset-path avec la fonction inset() permettait de créer un chemin carré le long duquel les boîtes pouvaient se déplacer en animant les valeurs de offset-distance. Cette méthode a simplifié le processus et permis de distribuer uniformément les boîtes grâce à des valeurs de animation-delay calculées proportionnellement. L'article explore également l'utilisation de offset-path avec d'autres formes comme polygon() pour créer des animations intéressantes et variées.

Tout est dans le titre

Tout est dans le titre

Lottie est un format d’animation basé sur JSON

Tout est dans le titre

Un excellent article sur le redesign du site de l'auteur, avec plein d'astuces CSS

Tout est dans le titre

Dans ce 3e et dernier article, l'auteur donne quelques conseils sur les performances de animations en JavaScript

Dans ce 2e article (sur 3), l'auteur donne une astuce pour préparer le navigateur aux animations : utiliser la règle CSS will-change

1er article (sur 3) à propos des animations CSS : dans celui ci l'auteur parle des propriétés à animer de préférence

Cette technique consiste à calculer à l'avance les transformations :

1°) F = First (position de départ)
2°) L = Last (position finale)
3°) I = Invert (calcul de la différence)
4°) P = Play (lancement de l'animation)

L'auteur montre les cas d'usage

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre