Koukaki

Modernisation du site d’un studio d’animation grâce à l’ajout d’animations interactives en JavaScript, CSS et Sass. J’ai intégré des effets visuels dynamiques, un carrousel et des animations au défilement pour enrichir l’expérience utilisateur.

les animations du site en video

Contexte de la mission

Koukaki est un projet réalisé dans le cadre de ma formation de Développeuse WordPress chez OpenClassrooms.

Dans ce scénario professionnel, j’interviens en tant qu’intégratrice WordPress au sein de l’agence MyCustomiWP, spécialisée dans le développement de thèmes WordPress sur mesure.

Ma mission consiste à améliorer le site Internet du studio d’animation Koukaki à la suite de la nomination de son dernier film aux Oscars du meilleur court-métrage d’animation. Afin de moderniser l’expérience utilisateur et de valoriser l’univers visuel du studio, plusieurs animations et interactions doivent être ajoutées à la page d’accueil du site.

Description du projet

Pour mener à bien cette mission, je collabore avec Martine, cheffe de projet de l’agence, qui me fournit l’ensemble des ressources nécessaires : maquettes, prototype interactif, cahier des charges détaillé, éléments graphiques et archive du site WordPress à installer en local.

Captures du projet

Le projet consiste à intégrer et développer différentes animations interactives tout en respectant les bonnes pratiques de développement WordPress. L’ensemble des modifications est réalisé directement dans un thème enfant afin de préserver la maintenabilité du projet et de garantir la compatibilité avec les futures mises à jour du thème parent.

Les animations demandées comprennent notamment des effets d’apparition au défilement de la page, la rotation d’éléments graphiques en CSS, un carrousel de personnages, des effets de parallaxe, l’intégration d’une vidéo ainsi que l’amélioration du menu de navigation mobile.

Pour répondre à ces besoins, j’ai utilisé JavaScript, CSS et Sass, ainsi que des bibliothèques spécialisées telles que jQuery et SwiperJS. Une attention particulière a été portée à l’organisation du code, à la performance du site et à l’intégration propre des scripts conformément aux recommandations de WordPress.

Compétences développées

• Manipuler le DOM avec JavaScript.
• Développer des animations CSS avancées.
• Utiliser Sass pour structurer et maintenir les feuilles de style.
• Intégrer des bibliothèques JavaScript telles que jQuery et SwiperJS.
• Développer des effets de parallaxe et d’apparition au scroll.
• Mettre en place un carrousel interactif.
• Respecter les bonnes pratiques de développement WordPress.
• Personnaliser un thème enfant sans recourir à un Page Builder.

Ce projet m’a permis de renforcer mes compétences en intégration front-end et en animation web, tout en découvrant comment améliorer l’expérience utilisateur d’un site WordPress grâce à des interactions dynamiques et des effets visuels modernes.