Koukaki
Contexte
Projet réalisé dans le cadre de ma formation de développeuse WordPress. L’objectif était de dynamiser le site existant du studio d’animation Koukaki en intégrant différentes animations et interactions à partir d’une maquette et d’un prototype. Les modifications devaient être réalisées dans un thème enfant, sans Page Builder, en utilisant notamment Sass et JavaScript tout en respectant les bonnes pratiques WordPress.
Technologies
WordPress, PHP, HTML, Sass / SCSS, CSS, JavaScript, SwiperJS, npm, Git, GitHub
Description
Koukaki est un projet de dynamisation d’un site WordPress existant pour un studio d’animation. L’objectif était d’enrichir la page d’accueil avec différentes animations et interactions tout en conservant la structure du site et en travaillant exclusivement dans un thème enfant.
J’ai mis en place un environnement Sass afin d’organiser les styles SCSS et de les compiler automatiquement en CSS avec npm. Les animations combinent ensuite CSS et JavaScript selon leurs besoins : apparition progressive des sections, titres animés au scroll, rotation continue des fleurs, flottement du logo et effets de parallaxe.
Le hero header a été enrichi avec une vidéo en arrière-plan et une image de fallback pour les appareils mobiles. La section des personnages a été transformée en carrousel avec SwiperJS, tandis que les nuages de la section Lieu se déplacent en fonction du scroll grâce à un effet de parallaxe développé en JavaScript.
J’ai également créé une section dédiée à la nomination du film aux Oscars sous forme de template part afin qu’elle puisse facilement être supprimée, ainsi qu’un menu fullscreen animé avec menu burger, fleurs en rotation et personnages flottants. L’ensemble a été intégré en respectant les bonnes pratiques WordPress pour le chargement des scripts et l’organisation du thème enfant.