KOUKAKI
Projet 9: Améliorez le site d'un studio d'animation avec JavaScript et des animations CSS
Détails du projet à effectuer
Je travaillez en tant qu’intégrateur WordPress chez MyCustomiWP, une agence spécialisée dans le développement de thèmes personnalisés. Ma mission est 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.
Ma cheffe de projet à l'agence m'informe des attentes du studio. Leur site Wordpress n'utilise pas de page builder et est entièrement coder à la main et le thème enfant doit comporter toutes les modifications que je vais faire.
Il y a 5 demandes précises (voir les demandes du studio koukaki) à développer qui requière de la programmation en javascript, jquery et l'utilisation de librairie en particulier pour le slider et certaines animations. La maquette créée par notre UX designer, comporte tous les éléments à modifier. Un prototype permet de voir visualiser les animations.
Ma cheffe de projet me demande d'utiliser Sass pour tout le CSS afin de bien structurer le code et pour rester cohérent avec le thème choisi. Lorsque j’utilise du JavaScript ou jQuery, je devrait intégrer proprement les scripts en respectant les bonnes pratiques données par la documentation de WordPress.
Ce que j'ai fait
Le thème utilisé est un thème entièrement personnalisé. Je vais donc créer un thème enfant de ce dernier pour ne pas toucher au code du thème de départ. Je ne vais donc installer aucune extension et voici les principales demandes à faire avec les solutions utilisées :
- Gestion du carrousel des personnages: je vais utiliser Swiper JS en appliquant 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 le librairie AOS (sections et titres). animation de bloc html en appliquant une direction(left, right, up, down), une durée, un offset et une temporisation de déclenchement
- Concernant le Hero. L'image de départ laisse place à une vidéo fourni par le studio sur laquelle se superpose le titre du film qui est animé en CSS keyframe d'un mouvement de flottement jusqu'au scroll de la page puis ce titre descend par un effet de paralaxe
- Gestion de rotation des fleurs: rotation de base gérée en CSS (avec les keyframes).
- Gestion du déplacement des nuages en fonction du scroll: création d'un fonction utilisant l'appel à element.getBoundingClientRect().top pour connaitre l'emplacement top de element et comparaison avec la taille de window puis ajout ou retrait au scroll d'une class css sur l'élément pour créer un effet de mouvement.
La maquette
Les liens externes
Le site final
Réalisation précédente
