Html
/Scss
/Js
Projet scolaire en développement front-end et back-end d'un site de vente de services dans le cadre d'un webjam.
L'objectif était d'intégrer un site wordpress avec un thème personnalisé le temps d'une fin de semaine en proposant la vente de services de transport internationaux dans une thématique choisie.
L'inspiration, les moodboards, les wireframes et les maquettes
Figma nous a permis d'organiser les processus du design en équipe allant de notre recherche d'inspirations et de comparables à nos moodboards; nos idées ont rapidement été transposées vers des wireframes simples pour déterminer chaque section par page afin d'attaquer rapidement le design de chacune d'entre elles.
Header fixed qui disparaît lors du scroll
Le header responsive est en fixed pour garder les éléments toujours en haut de la page. Ils sont gérés avec un toggle de classe en JavaScript lors du défilement vers le bas afin qu'ils effectuent une transition en dehors de l'écran pour laisser place à tout le contenu; ceux-ci réapparaissent lorsqu'on défile vers le haut.
Composante JavaScript avec la librairie Locomotive Scroll
Les effets de parallaxe lors du défilement sont gérés avec l'instanciation de la constante locomotive de la librairie locomotive-scroll. Ensuite, chaque élément ayant des data-scrolly avec une spécification (fromLeft, fromBottom, etc.) apparaît avec une transition sur la translation et l'opacité de l'élément ciblé.
Ce travail intensif est le résultat de moi et mon équipe durant l'événement du webjam 2024 qui s'est déroulé au Cégep Édouard-Montpetit; il nous a permis de remporter une bourse de 500$ puisqu'il s'est démarqué comme étant le meilleur site web.
Un énorme merci à
