Okkio Website
Jeg byggede denne demo for at øve scrollanimationer og parallax. Koden bruger GSAP (ScrollTrigger, ScrollTo, SplitText, ScrollSmoother) til reveals og sektionsbevægelse samt simpel parallax på billeder. Lyd bruger Web Audio API med en cross-fade-looper; hover-/klik-SFX er genereret med Adobe Firefly. Jeg designede logoet, skrev teksterne, redigerede og omfarvede alle billeder og fastsatte farvepaletten. Sitet er fuldt responsivt og SEO-klar.
Teknologier
HTML5
CSS3
JavaScript (ES6)
GSAP
ScrollTrigger
ScrollSmoother
Parallax
Web Audio API
Responsive Design
SEO
Udfordringer
At gøre animationer flydende og lette, mens de forbliver læsbare på mobil.
Løsninger
Brugte GPU-venlige transforms, GSAP-timelines med ScrollTrigger, en skræddersyet audio-cross-fade-looper, komprimerede WebP-billeder og mobile-first media queries.
