Okkio Website
Construí esta demo para practicar animaciones de desplazamiento y parallax. El código usa GSAP (ScrollTrigger, ScrollTo, SplitText, ScrollSmoother) para revelaciones y movimiento de secciones, además de parallax simple en imágenes. El audio utiliza la Web Audio API con un reproductor de fundido cruzado; los efectos sonoros de hover/clic se generaron con Adobe Firefly. Diseñé el logotipo, redacté los textos, edité y recoloricé todas las imágenes y definí la paleta de colores. El sitio es totalmente responsive y está preparado para SEO.
Tecnologías
HTML5
CSS3
JavaScript (ES6)
GSAP
ScrollTrigger
ScrollSmoother
Parallax
Web Audio API
Responsive Design
SEO
Retos
Lograr animaciones fluidas y ligeras que sigan siendo legibles en dispositivos móviles.
Soluciones
Se utilizaron transformaciones compatibles con GPU, líneas de tiempo GSAP con ScrollTrigger, un reproductor de audio personalizado con fundido cruzado, imágenes WebP comprimidas y media queries mobile-first.
