Koukaki
Améliorez le site d'un studio d'animation avec JavaScript et des animations CSS
Projet 9 de la formation "Développeur WordPress" d'OpenClassrooms
Détails du projet
En tant qu’intégrateur WordPress chez MyCustomiWP, une agence spécialisée dans le développement de thèmes personnalisés.
Je suis chargé de dynamiser le site internet du studio d’animation Koukaki dont le dernier film a été nominé aux Oscars du meilleur court-métrage d’animation.
Pour se faire, je reçois une maquette conçue par notre UX Designer, me permettant de voir tous les éléments à modifier.
Mais aussi un prototype pour voir les animations attendues et enfin les demandes du studio.
Processus de réalisation du projet
Avant toute chose, il faut préparer le thème enfant pour que nos modifications ne soient pas affectées si il y a une mise à jour du thème parent.
Pour réellement entamer ce projet, il faut tout d’abord ajouter des effets de Fade In aux différentes sections du site lorsque l’on arrive à celles-ci. Pour se faire, je décide d'utiliser JavaScript qui va me permettre de faire apparaître la section lorsque l'écran de l'utilisateur arrive à la section.
Pour continuer, je vais m’attaquer à la rotation des fleurs qui sont disposées un peu partout sur le site web, pour se faire je vais utiliser les Keyframes CSS.
Nous avons désormais nos sections qui apparaissent en fade in, mais nous souhaiterions aussi avoir les titres qui arriveraient du bas vers le haut, mot par mot. Pour cela, je vais à nouveau utiliser JS pour découper les mots en lettre et les faire apparaître au fur et à mesure avec un délai.
Je vais créer un template pour la section de nomination aux Oscars qui sera retirée du site une fois le festival terminé.
Nous allons maintenant remplacer l’image de la bannière par une vidéo qui apportera plus de vie au Hero Header du site. Il faut aussi ajouter une image en Fallback pour les mobiles et le temps de chargement.
Pour finaliser notre Header, il faut ajouter un effet Parallaxe ainsi que le logo en flottement. Il suffit d’importer dans mon functions.php le CDN de simple parallaxe
Pour la section des personnages du film, je décide d'utiliser Swiper.JS pour les avoir sous forme de carrousel, et pour la section "Lieu", j'utilise du JS pour faire en sorte que le nuage bouge avec le scroll utilisateur.
Langages utilisés
