Koukaki

Description

Je suis intégrateur WordPress chez MyCustomiWP, une agence renommée pour son expertise dans le développement de thèmes WordPress personnalisés.

Ma mission a été de revitaliser le site web du studio d’animation Koukaki, célèbre pour son dernier film, lequel a reçu une nomination aux Oscars dans la catégorie du meilleur court-métrage d’animation.

Ma cheffe de projet à l’agence, Martine, m’a communiqué les informations pour commencer la mission.

Salut !

J’espère que tu vas bien.

Comme tu le sais, le studio Koukaki aimerait en particulier ajouter des animations aux différentes sections de la page d’accueil du site.

Je te mets en pièce jointe :

  • la maquette créée par notre UX designer, qui comporte tous les éléments à modifier ;
  • un prototype pour pouvoir visualiser les animations ;
  • les 5 demandes du studio, avec les changements généraux puis ceux section par section, de haut en bas.

Je t’ai extrait les images qui ont été modifiées, et te les ai mises en pièce jointe avec la vidéo pour que tu les intègres au thème enfant.

Pour les animations, tu es, dans la plupart des cas, obligé de les réaliser en CSS ou en JavaScript, voire jQuery. Seule la rotation des fleurs doit obligatoirement être réalisée directement en CSS. De plus, il faudra que tu utilises Sass pour tout le CSS que tu vas développer afin de bien structurer le code et pour rester cohérent avec le thème choisi.

Lorsque tu utilises du JavaScript ou jQuery, pense à intégrer proprement les scripts en respectant les bonnes pratiques données par la documentation de WordPress.

Peux-tu m’envoyer le code du thème enfant modifié quand tu as fini ? Merci beaucoup.

P.S.: N’oublie pas que dans notre agence on travaille toujours sur le thème enfant créé pour le client. On n’utilise pas de Page Builder, cela nous permet de garder un code propre et performant.

Cahier des Charges Techniques

Généralités

1. Améliorations Visuelles Globales :

  • Effets d’Apparition : Implémenter un effet de “fade in” pour chaque section lors du chargement initial du site, afin d’améliorer progressivement la visibilité.
  • Animation de Fleurs : Ajouter un effet de rotation continue sur les fleurs (sans affecter les tiges) à l’aide d’une animation CSS simple.
  • Section Oscars : Intégrer une nouvelle section après la présentation du studio pour mettre en avant la nomination du film aux Oscars du meilleur court-métrage d’animation, conformément aux maquettes fournies.
  • Animation des Titres : Appliquer un effet d’apparition sur les titres des sections similaire au “flow 4” du prototype Figma, en tenant compte des directives d’animation spécifiées.

2. Hero Header :

  • Vidéo en Arrière-Plan : Incorporer une courte vidéo du film derrière le titre principal, avec maintien de l’image actuelle comme affichage par défaut sur mobile et pendant le chargement de la vidéo.
  • Effet de Flottement du Titre : Créer un mouvement continu de flottement pour le titre, inspiré par le mouvement des têtes de chats dans la vidéo, avec liberté sur les détails de l’animation.
  • Effet Parallaxe : Instaurer un effet de parallaxe entre le titre et la vidéo lors du défilement vers le bas.

Spécifications par Section

3. Section Personnages :

  • Carrousel de Personnages : Remplacer la présentation actuelle par un carrousel utilisant l’effet “Cover Flow” de SwiperJS pour les personnages, et intégrer cette fonctionnalité dans un template partiel dédié.

4. Section du Lieu :

  • Animation des Nuages : Ajouter un effet de déplacement latéral (300 px vers la gauche) pour les nuages lors du scroll, nécessitant le remplacement de l’image de fond actuelle par une nouvelle, incluant les nuages comme éléments séparés.

Menu

5. Affichage du Menu :

  • Menu Plein Écran : Le menu doit s’afficher en plein écran lors de l’activation du bouton hamburger, situé dans la barre supérieure de l’entête.
Details
  • Date: décembre 14, 2023
  • Categories: Formation WordPressJavaScript
  • technologies: WORDPRESS
  • PHP
  • JAVASCRIPT
  • SASS
  • maquette: LINK
  • github: LINK
  • hebergement: O2SWITCH
  • url: koukaki.jeremyteurterie.com