Projet OpenClassRooms
Développement personnalisé Stéphane ARRAMI 2024
Hébergement : O2Switch
Contraintes
- Développement d’un thème enfant avec le pré-processeur Sass.
- Création d’un menu dépliable animé (croix) avec apparition d’une modale avec transition.
- Modale plein écran en gardant la visibilités du menu par-dessus.
- Contrôle de l’épaisseur, du décalage et animation du burger.
- Centrage du titre et décalage à droite du burger.
- Veiller à garder le titre centré également en version mobile.
- Développement de la modale et intégration à l’intérieur du menu et des animations de personnages.
- Positionner les éléments logo, chats et fleurs animés selon la maquette et prototype.
- Centrage du menu dans la modale.
- Manipulation du DOM avec JavaScript pour ajouter de l’interactivité.
- Utilisation d’animations CSS pour venir enrichir l’expérience utilisateur.
- Effet hover et personnalisation des éléments de menu.
- Intégration d’une section avec vidéo avec image fallback en version mobile.
- Intégration d’une section Oscars responsive.
- Développement des effets d’animation : text reveal, apparition, rotation etc.
- Animations au scroll, animation des titres et effets de paraxalle.
- Intégration d’images de nuages au dessus d’un paysage et déplacement des nuages à l’interaction de l’utilisateur (Intersection Observer).
- Apparations en fade-in des sections.
- Respect du responsive : veiller au dépassement des éléments.
- Centrage du titre et décalage du texte du menu de navigation principal.
- Restitution de livrables le plus propre possible : partials SCSS, regroupement de fonctions.
- Création d’une section avec template-part sécurisé et boucle WordPress sur le type de contenus personnages.
- Préparation du template pour faire fonctionner le carrousel avec la bibliothèque JavaScript Swiper.
- Animation des personnages avec la bibliothèque Swiper selon le Coverflow imposé.
- Arrières-plan des titres selon le contexte mobile avec les propriétés de position.
- Contrôle des interactions disableOnInteraction: false.
- Chargement des animations quand nécessaire.
- Utilisation de la bibliothèque JQuery avec WordPress.
- Contrôle du poids des images, renommages.
- Intégration des visuels de la maquette Figma.
- Chargement simultanée au chargement de toutes les sections selon une orientation précise.
- Création de liens sur les menus et travail sur la sémantique HTML des templates.
- Accélération de la rotation des éléments selon la profondeur de la page.
- Tenir compte du menu d’administration WordPress en version desktop et mobile.
- Veiller au décalage de ces menus menu admin, menu de navigation, slider vidéo ou image si version mobile.
- Création de liens sur les menus.
- Amélioration de la sémantique HTML des templates.
- Utilisation des variables disponibles breakpoints.scss $breakpoint__large_phone, etc. pour les media queries.
- Animation prononcée du flottement des éléments personnages chats dans la modale.
- Adaptation responsive de la disposition des éléments dans la fenêtre modale pour une compatibilité multi-écrans.
- Optimisation des performances d’animations : séparation des responsabilités entre CSS et JavaScript.
- Respect des bonnes pratiques WordPress.