Site Okkio
J'ai créé cette démo pour m'exercer aux animations de défilement et à la parallaxe. Le code utilise GSAP (ScrollTrigger, ScrollTo, SplitText, ScrollSmoother) pour les révélations et le mouvement des sections, avec un effet de parallaxe simple sur les images. L'audio exploite la Web Audio API avec un lecteur à fondus enchaînés ; les effets sonores de survol et de clic ont été générés avec Adobe Firefly. J'ai conçu le logo, rédigé les textes, retouché et recoloré toutes les images, et défini la palette de couleurs. Le site est entièrement responsive et optimisé pour le SEO.
Technologies
HTML5
CSS3
JavaScript (ES6)
GSAP
ScrollTrigger
ScrollSmoother
Parallax
Web Audio API
Responsive Design
SEO
Défis
Rendre les animations fluides et légères tout en restant lisible sur mobile.
Solutions
Utilisation de transforms compatibles GPU, timelines GSAP avec ScrollTrigger, lecteur audio personnalisé à fondus enchaînés, images WebP compressées et media queries mobile-first.
