Okkio Website
Ich habe diese Demo erstellt, um Scroll-Animationen und Parallax zu üben. Der Code verwendet GSAP (ScrollTrigger, ScrollTo, SplitText, ScrollSmoother) für Einblendungen und Abschnittsbewegungen sowie einen einfachen Parallax-Effekt auf Bildern. Das Audio nutzt die Web Audio API mit einem Cross-Fade-Looper; Hover-/Klick-SFX wurden mit Adobe Firefly generiert. Ich habe das Logo entworfen, die Texte geschrieben, alle Bilder bearbeitet und neu eingefärbt und die Farbpalette festgelegt. Die Website ist vollständig responsive und SEO-bereit.
Technologien
HTML5
CSS3
JavaScript (ES6)
GSAP
ScrollTrigger
ScrollSmoother
Parallax
Web Audio API
Responsive Design
SEO
Herausforderungen
Animationen flüssig und leichtgewichtig zu gestalten und gleichzeitig auf Mobilgeräten lesbar zu bleiben.
Lösungen
Einsatz GPU-freundlicher Transforms, GSAP-Timelines mit ScrollTrigger, eines benutzerdefinierten Audio-Cross-Fade-Loopers, komprimierter WebP-Bilder und Mobile-First Media Queries.
