Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sit, sunt. Repellat quisquam dolorem ea
laboriosam perferendis omnis quis recusandae alias accusamus cupiditate eaque praesentium aperiam
voluptates veniam veritatis expedita placeat debitis modi, iste sapiente facilis. Iure tenetur aut enim
incidunt magni laboriosam dolores ut consequatur, repellendus consectetur tempora assumenda nisi ullam
qui iusto, nihil reiciendis eos.
Fugiat molestiae accusamus quasi reprehenderit expedita ducimus assumenda aliquam facilis mollitia, sed
impedit sunt odit pariatur voluptatem officia, delectus doloribus, natus nam doloremque non eaque odio?
Excepturi officiis provident nemo ducimus minima vitae. Exercitationem laborum unde suscipit officia ad
accusamus ipsam sint, repudiandae magni dicta quasi fugit minima possimus cupiditate accusantium
impedit.
Ea quam dignissimos sapiente quos ullam eum dolore sunt, consequatur, libero ex aspernatur consequuntur
nostrum illum doloribus ipsum distinctio voluptatum modi sit quas, optio minima dolor. Ut laudantium
voluptatum laborum maiores iste quasi. Officia dicta deserunt libero. Alias aspernatur quas sit deserunt
obcaecati magnam cupiditate autem, itaque qui. Ipsa hic veritatis quod quasi.
Fugiat molestiae accusamus quasi reprehenderit expedita ducimus assumenda aliquam facilis mollitia, sed
impedit sunt odit pariatur voluptatem officia, delectus doloribus, natus nam doloremque non eaque odio?
Excepturi officiis provident nemo ducimus minima vitae. Exercitationem laborum unde suscipit officia ad
accusamus ipsam sint, repudiandae magni dicta quasi fugit minima possimus cupiditate accusantium
impedit.
Ea quam dignissimos sapiente quos ullam eum dolore sunt, consequatur, libero ex aspernatur consequuntur
nostrum illum doloribus ipsum distinctio voluptatum modi sit quas, optio minima dolor. Ut laudantium
voluptatum laborum maiores iste quasi. Officia dicta deserunt libero. Alias aspernatur quas sit deserunt
obcaecati magnam cupiditate autem, itaque qui. Ipsa hic veritatis quod quasi ut.
Froggiesplaining :
🎯 Objectifs de cet exercice :
Découvrir les animations CSS pilotées par le défilement (scroll-driven animations) avec la propriété animation-timeline: scroll(), une fonctionnalité moderne qui élimine le besoin de JavaScript pour ce type d'effet.
🎨 Qu'est-ce qu'une animation pilotée par le scroll ?
Au lieu d'utiliser le temps comme référence pour l'animation, on utilise la position du défilement de la page. Plus on descend dans la page, plus l'animation progresse.
💡 Fonctionnement de cet exemple :
- État initial (en haut de page) : Le smiley est triste avec une bouche courbée vers le bas
- Pendant le défilement : La bouche se transforme progressivement
- État final (en bas de page) : Le smiley est content avec une bouche souriante vers le haut
🔧 Technologies utilisées :
animation-timeline: scroll() : Lie l'animation au défilement de la page (pas au temps)@keyframes : Définit les états de l'animation (début et fin)d: path() : Propriété CSS permettant de modifier les chemins SVG directement en CSS- SVG : Format vectoriel pour dessiner le smiley (cercle, ellipses, path)
- Courbes de Bézier : La commande
Q (Quadratic) crée des courbes lisses pour la bouche
🧪 Testez : Faites défiler la page de haut en bas pour voir le smiley changer d'expression progressivement !
⚠️ Compatibilité navigateurs : Cette fonctionnalité est récente et fonctionne sur
Chrome, Edge et Safari récents. Firefox ne la supporte pas encore complètement.
✨ Avantages :
- Aucun JavaScript nécessaire : Le CSS gère tout !
- Performant : Optimisé par le navigateur
- Déclaratif : Code plus simple et maintenable
