Koukaki

JavaScript CSS HTML PHP

Résumé du projet

Projet d’animation front-end réalisé dans le cadre de ma formation de développeur WordPress, basé sur l'intégration et l’animation d’un site vitrine pour le studio Koukaki. L’objectif était d’ajouter des animations dynamiques et interactives avec CSS et JavaScript, tout en respectant une maquette précise et des intentions d’animation définies dans Figma.

Ce projet avait pour objectif d’améliorer l’expérience utilisateur d’un site vitrine pour un studio d’animation, en ajoutant des animations immersives et des interactions visuelles fluides. Il s’agissait d’un exercice de rigueur dans l’intégration web, avec des attentes précises en matière d’animations et d’effets visuels, basés sur une maquette Figma.

Conception et intégration

L’intégration a nécessité une combinaison de CSS, JavaScript et WordPress :

Ajout d’animations CSS sur les titres et les fleurs tournantes.
Effets de parallaxe et scroll sur le Hero et les nuages de fond.
Intégration d’une vidéo de fond avec fallback image pour le mobile.
Création d’un carrousel interactif pour les personnages avec SwiperJS (effet Cover Flow).
Intégration d’une section dédiée aux Oscars, comme indiqué dans la maquette.
Développement d’un menu fullscreen animé, déclenché au clic sur le hamburger.
Gestion de l’affichage dynamique avec WordPress, incluant des template parts spécifiques.

Technologies utilisées

Technologie	Utilisation
WordPress	Structure du site et gestion des contenus.
JavaScript	Animation au scroll, parallaxe, gestion du menu, carrousel.
CSS & Animations	Effets visuels (fade-in, flottement, rotation, transitions).
SwiperJS	Carrousel dynamique pour la galerie des personnages.
Figma	Base de référence pour la maquette et les intentions UX/UI.