Okkio 网站
我构建了这个演示来练习滚动动画和视差效果。代码使用GSAP（ScrollTrigger、ScrollTo、SplitText、ScrollSmoother）实现揭示和区块运动，以及图片上的简单视差效果。音频使用Web Audio API配合交叉淡入淡出循环器；悬停/点击音效使用Adobe Firefly生成。我设计了标志、撰写了文案、编辑并重新着色了所有图片，并设定了色彩方案。网站完全响应式且已做好SEO准备。
技术栈
HTML5
CSS3
JavaScript (ES6)
GSAP
ScrollTrigger
ScrollSmoother
Parallax
Web Audio API
Responsive Design
SEO
挑战
使动画流畅且轻量，同时在移动端保持可读性。
解决方案
使用GPU友好的变换、带ScrollTrigger的GSAP时间线、自定义音频交叉淡入淡出循环器、压缩的WebP图片和移动优先的媒体查询。
