Koukaki – Amélioration le site d’un studio d’animation avec JavaScript et des animations CSS
Contexte du projet
En tant qu’intégrateur WordPress, j’ai été chargé de dynamiser le site web du studio d’animation Koukaki dont le dernier film est nommé aux Oscars.
La mission confiée a été de :
•Ajouter un effet d’apparition en fade in pour qu’elles apparaissent avec le chargement du site,
•Ajouter un effet de rotation aux fleurs,
•Travail sur l’apparition des titres,
•Ajout d’une section sur la nomination aux Oscars,
•Ajout d’une vidéo au hero header,
•Effet de flottement du titre,
•Effet de parallaxe titre et vidéo,
•Création d’un carrousel de présentation des personnages,
•Ajout d’un effet de déplacement des nuages vers la gauche d’une amplitude de 300 pixels,
•Création d’un menu Burger avec des effets hover, des animations.
Objectifs :
Manipuler des éléments du DOM avec JavaScript,
Mettre en œuvre des animations CSS.
Compétences :
Pouvoir dynamiser un site web avec JavaScript et des animations CSS est cruciale dans le développement web moderne.
Ces compétences augmentent non seulement l’engagement des utilisateurs mais améliorent également l’aspect visuel des sites web.
La maîtrise de Sass pour structurer le CSS et l’utilisation efficace de bibliothèques JavaScript enrichissent mon profil en tant que développeur web créatif et techniquement compétent.
Ces compétences sont particulièrement valorisées dans les projets web où l’esthétique et l’expérience utilisateur sont prioritaires.
Outils :
Grâce à mes connaissances en JavaScript, j’ai pu améliorer le site WordPress du studio Koukaki. J’ai ajouté des animations interactives et dynamiques, en utilisant JavaScript, CSS et des bibliothèques spécialisées.
J’ai appris à manipuler les éléments du DOM avec JavaScript pour ajouter de l’interactivité au site. J’ai intégré des animations telles qu’une vidéo, un carrousel, des effets de parallaxe et d’apparition, en respectant les demandes spécifiques du studio.
J’ai utilisé également des animations CSS pour enrichir l’expérience utilisateur du site. L’utilisation de Sass, un pré-processeur CSS, m’a permis de structurer et maintenir un code CSS cohérent et facile à gérer.
J’ai enfin explorer l’utilisation de bibliothèques telles que JQuery et SwiperJS pour faciliter et accélérer le développement des animations.
