Présentation de quatre fonctionnalités CSS modernes qui permettent de gérer des animations et interactions avancées directement dans le navigateur, réduisant fortement le besoin de JavaScript. L’article met notamment en avant View Transitions, qui permet de créer facilement des transitions animées entre pages ou états d’interface, et Scroll-Driven Animations, qui synchronisent les animations avec la position de défilement pour réaliser des effets comme le parallaxe ou l’apparition d’éléments. Il explique aussi animation-composition, qui combine plusieurs transformations sans écraser les valeurs existantes, et @property, qui introduit des variables CSS typées et animables, rendant possibles des transitions fluides sur des propriétés complexes comme les dégradés ou les couleurs.
Les-Tilleuls.coop a conçu un site immersif pour célébrer les 20 ans de Symfony, basé sur une timeline interactive pilotée par le scroll, avec un design inspiré du logo anniversaire. Chaque section représente une année clé, avec des animations fluides pour plonger l’utilisateur dans l’histoire du framework. Les défis techniques incluaient l’optimisation des performances (chargement progressif des animations) et la gestion des décalages de scroll sous Firefox (corrigés via un ajustement manuel du positionnement). Un projet alliant narratif visuel et expertise UX/UI, pour rendre hommage à un outil central dans leur quotidien depuis 15 ans.
Tout est dans le titre : ça parle de scroll driven animation
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre