Koukaki

Contexte du projet :

En tant qu’intégrateur WordPress chez MyCustomiWP, j’ai été chargé de dynamiser le site du studio d’animation Koukaki. Ce studio, dont le dernier court-métrage a été nominé aux Oscars, souhaitait enrichir la page d’accueil de leur site avec des animations interactives et dynamiques.

Objectifs du projet :

Dynamiser la page d’accueil avec des animations interactives (vidéo, carrousel, effets de parallaxe et d’apparition) en utilisant des bibliothèques JavaScript et le CSS est sans l’aide de page builder – Tout doit être codé.

Actions effectuées :

Intégrer les scripts de manière propre en respectant les bonnes pratiques WordPress.
Créer les animations pour la rotation des fleurs essentiellement en CSS et Sass pour la structure des styles.
Créer un code clair et performant sans utiliser de Page Builder.
Adapter les maquettes et prototypes fournis par l’UX designer.
Intégrer des images et vidéos modifiées dans le thème enfant.

Compétences développées

Ce projet m’a permis d’apprendre et d’approfondir plusieurs compétences :

Manipulation du DOM avec JavaScript pour ajouter des interactions.
Création d’animations en CSS et JavaScript pour améliorer l’expérience utilisateur.
Utilisation du préprocesseur Sass, pour une meilleure organisation du code.
Gestion du carrousel des personnages : utilisation de SwiperJS avec un effet Cover Flow et une boucle infinie.
Gestion de la modale du menu : création et gestion de la modale avec l’aide de jQuery.
Gestion de la détection de l’apparition des éléments sur le DOM : utilisation de l’API Intersection Observer pour déclencher des événements uniquement lorsque les éléments concernés (sections et titres) apparaissent sur le DOM, avec un effet de fade in.
Gestion du parallaxe du hero : gérée uniquement en CSS.
Gestion de la rotation des fleurs : rotation de base gérée en CSS, avec une accélération de la rotation via JavaScript lorsqu’un scroll est détecté.
Gestion du déplacement des nuages en fonction du scroll : implémentée en JavaScript, en modifiant une variable utilisée pour le positionnement horizontal en CSS.

Lien du projet sur GitHub :

Contexte du projet :

Objectifs du projet :

Compétences développées

Hello world!