Okkio Website
Κατασκεύασα αυτό το demo για εξάσκηση σε scroll animations και parallax. Ο κώδικας χρησιμοποιεί GSAP (ScrollTrigger, ScrollTo, SplitText, ScrollSmoother) για reveals και κίνηση sections, καθώς και απλό parallax σε εικόνες. Ο ήχος χρησιμοποιεί Web Audio API με cross-fade looper· τα hover/click SFX δημιουργήθηκαν με Adobe Firefly. Σχεδίασα το λογότυπο, έγραψα τα κείμενα, επεξεργάστηκα και ξαναχρωμάτισα όλες τις εικόνες και όρισα τη χρωματική παλέτα. Η ιστοσελίδα είναι πλήρως responsive και έτοιμη για SEO.
Τεχνολογίες
HTML5
CSS3
JavaScript (ES6)
GSAP
ScrollTrigger
ScrollSmoother
Parallax
Web Audio API
Responsive Design
SEO
Προκλήσεις
Να γίνουν τα animations ομαλά και ελαφριά, παραμένοντας ευανάγνωστα σε κινητό.
Λύσεις
Χρήση GPU-friendly transforms, GSAP timelines με ScrollTrigger, custom audio cross-fade looper, συμπιεσμένες εικόνες WebP και mobile-first media queries.
