Scénario
Je travaille 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.
Je communique avec Martine, la cheffe de projet à l’agence.
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.
Mission:
- Analyser les tâches à réaliser
- Modifier l’affichage général du site
- Ajouter la vidéo dans le Hero header
- Animer les personnage avec un carrousel JavaScript
- Animer les éléments d’interface du lieu
- Dynamiser le menu du site
Process:
J’ai tout d’abord installé le site en local . Le thème est entièrement personnalisé.
Mise en place des différentes sections qui apparaissent au chargement de la page avec un effet de fade-in en utilisant l’API « Intersection observer ».
Ajout de la nouvelle section présentant la nomination aux oscars. Et animation des fleurs gérée en CSS .
Puis ajout de la vidéo dans le Hero header en background , le titre du site ayant un mouvement de flottement et ensuite un effet parallaxe entre la video et le titre uniquement en CSS.
Mise en place du carrousel des personnages avec la librairie SwiperJS .
Déplacement des nuages dans la section lieu au scroll de la souris avec la librairies SkrollJS.
Suppression du menu actuel et ajout d’un menu burger , avec la création d’un menu en fullscreen avec l’animation des nombreux éléments intégrés dans ce menu.