Koukaki
Passage d'une page 100% statique à une page avec des éléments dynamiques
/!\ LE SITE N'EST ACTUELLEMENT PLUS EN LIGNE /!\
HTML5 | CSS | PHP | JavaScript | WordPress | Gutenberg
Détails du projet à effectuer
/!\ LE SITE N’EST ACTUELLEMENT PLUS EN LIGNE /!\
Ce projet, fait parti d’un exercice de ma formation avec OpenClassrooms.
Je vais travailler en tant qu’intégrateur WordPress chez MyCustomiWP (agence spécialisée dans le développement de thèmes personnalisés).
Le site internet du studio d’animation Koukaki existe déjà mais il entièrement statique. Il faut le rendre plus dynamique.
L’UX designer a créé sur Figma, une maquette et un prototype pour pouvoir visualiser les animations demandés par le studio Koukaki. Il faudra respecter scrupuleusement cette maquette.
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.
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 l’API Intersection Observer pour déclencher des évènements uniquement quand les éléments concernés (sections et titres) apparaissent sur le DOM et faire apparaitre ces éléments avec un effet de fade in.
- Gestion du parallaxe du hero: cette partie est gérée uniquement en CSS.
- Gestion de rotation des fleurs: rotation de base gérée en CSS puis rotation accélérée par JavaScript quand un scroll est détecté.
- Gestion du déplacement des nuages en fonction du scroll: gérée par JavaScript en modifiant une variable utilisée pour le positionnement horizontal en CSS.
Evolution depuis la mise en place :
- Ajout d’une extension pour mieux sécurisé le site.
- Ajout d’une extension pour mieux sécurisé le site.
Réalisation précédente
