For this project, I implemented an interactive and visually engaging website for Koukaki, focusing on seamless animations and UI interactions. Key elements included:
→ Character Carousel: Developed a dynamic character carousel using Swiper JS, featuring a Cover Flow effect and infinite loop for smooth navigation.
→ Menu Modal: Built and managed a menu modal using jQuery, ensuring an accessible and responsive navigation experience.
→ Element Appearance Detection: Leveraged the Intersection Observer API to trigger events when specific sections and titles appeared in the viewport, adding a fade-in effect to create a smooth visual flow.
→ Hero Parallax Effect: Achieved a parallax effect on the hero section entirely with CSS, optimizing for performance and consistency across devices.
→ Flower Rotation Animation: Created a base rotation animation with CSS, then enhanced it with JavaScript to increase rotation speed during scrolling for a more immersive experience.
→ Cloud Movement on Scroll: Used JavaScript to adjust the horizontal position of clouds based on scroll, dynamically updating a CSS variable for a natural, flowing effect.