Site Web du Studio d’Animation Koukaki
En tant qu’intégrateur WordPress chez MyCustomiWP, je suis chargé de dynamiser le site du studio d’animation Koukaki, récemment nominé aux Oscars pour un court-métrage d’animation. En collaboration avec l’équipe de conception, je m’efforce de saisir l’esthétique du film en mettant en place des thèmes WordPress personnalisés. L’accent est mis sur la performance, l’immersion des visiteurs dans l’univers du film à travers des médias attrayants, et la promotion virale sur les réseaux sociaux. Le site sera responsive pour garantir une expérience optimale sur tous les appareils, dans le but de créer une plateforme en ligne mémorable et immersive qui met en valeur l’excellence du studio Koukaki.
Affichage général :
- Ajout d’un effet de fade in à chaque section de la page pour une apparition progressive lors du chargement du site.
- Intégration d’une animation CSS pour des fleurs tournantes sans animation sur les tiges.
- Introduction d’une section sur la nomination du film aux Oscars du meilleur court-métrage d’animation après la présentation du studio.
- Application d’un effet d’apparition sur les titres des sections, similaire au flow 4 du prototype Figma.
Hero Header :
- Intégration d’une brève vidéo du court-métrage en fond derrière le titre, avec l’image de fond actuelle en fallback pour le mobile et pendant le chargement de la vidéo.
- Ajout d’un effet de flottement au titre, inspiré par la tête des chats dans la vidéo.
- Création d’un effet de parallaxe entre le titre et la vidéo lors du défilement vers le bas.
Section des personnages :
- Remplacement de la mise en page actuelle par un carrousel utilisant l’effet Cover Flow de SwiperJS pour faire défiler les différents personnages.
- Création d’un template partiel distinct pour cette section.
Section du lieu :
- Modification de la mise en page en ajoutant un effet de déplacement des nuages vers la gauche au fur et à mesure du défilement de la page (300 px d’amplitude).
- Remplacement de l’image de fond actuelle par une nouvelle image et intégration des nuages fournis dans le dossier « images modifiées ».
Menu :
- Affichage du menu en plein écran au clic sur le menu hamburger, situé dans la barre supérieure de l’en-tête.