[ Natours ]
[ Le Projet ]
Maîtriser les animations CSS
Un site de tours nature mettant en vedette les animations CSS avancées. Keyframes, transitions, transforms, clip-path — ce projet explore toutes les techniques pour créer des interfaces dynamiques et engageantes sans JavaScript.
Contexte
Formation "Advanced CSS and Sass" par Jonas Schmedtmann (Udemy)
Objectif
Maîtriser les animations CSS et l'architecture SASS 7-in-1
[ Le Défi ]
Des animations fluides et performantes
Chaque section du site utilise des effets visuels différents — header avec clip-path animé, cartes qui pivotent en 3D, images avec overlay au survol, navigation plein écran avec animation radiale. Le défi : tout animer en CSS pur, sans sacrifier la performance.
[ Solution ]
Architecture SASS 7-in-1
Le projet utilise l'architecture 7-in-1 : abstracts, base, components, layout, pages, themes, vendors. Chaque composant vit dans son propre fichier, les mixins gèrent les breakpoints responsive, et les variables centralisent les couleurs et espacements.
Les animations utilisent des keyframes pour les mouvements complexes et des transitions pour les états hover. La propriété backface-visibility: hidden garantit des animations 3D fluides sans flickering.
[ Résultat ]
CSS peut tout animer
Ce projet m'a montré la puissance des animations CSS pures. Avec les bons keyframes et transitions, on peut créer des expériences interactives riches sans toucher à JavaScript. L'architecture 7-in-1 garde le code maintenable même avec beaucoup d'animations.
Animations
- @keyframes
- Transitions
- Transforms 3D
- clip-path
Architecture
- SASS 7-in-1
- Mixins responsive
- Variables
- BEM
Techniques
- Pseudo-éléments
- Flip cards
- Image overlays
- Custom inputs
[ Crédits ]
Ce projet a été réalisé dans le cadre du cours Advanced CSS and Sass: Flexbox, Grid, Animations and More! par Jonas Schmedtmann. Le design original et le concept sont de Jonas — j'ai effectué l'intégration complète en suivant la formation.