Portfolio Développement Front
TP5 – Scroll et interactions JavaScript
Exercice 1 – Ancres, scroll fluide et retour en haut
Dans cet exercice, j’ai repris le travail réalisé précédemment sur les sélecteurs CSS en rendant visibles simultanément les trois paragraphes et en utilisant des ancres pour naviguer dans la page. J’ai d’abord observé le comportement par défaut du navigateur, où le scroll vers une ancre est immédiat et parfois brutal pour l’utilisateur. L’ajout de la propriété CSS scroll-behavior: smooth sur l’élément html m’a permis de constater une amélioration nette de l’ergonomie, avec un défilement progressif et plus naturel. Enfin, l’ajout d’un bouton « Retour en haut », déclenchant un défilement vers le début du document, m’a permis de comprendre comment combiner navigation, accessibilité et confort utilisateur, tout en utilisant JavaScript de manière simple et pertinente.
Voir l’exercice 1Exercice 2 – Scroll et modification dynamique des couleurs
Cet exercice m’a permis de comprendre le lien direct entre la position de défilement de l’utilisateur et la modification dynamique du style d’une page grâce à JavaScript. En calculant la proportion de scroll effectuée par rapport à la hauteur totale du document, j’ai pu faire évoluer progressivement la couleur de fond du noir vers le rouge. Ce travail m’a aidé à mieux comprendre les notions de scrollTop, scrollHeight et clientHeight, ainsi que leur utilité dans des interactions basées sur le défilement.
Voir l’exercice 2Exercice 3 – Scroll interne et barres de progression
Dans cet exercice, j’ai travaillé sur une mise en page en colonnes avec des paragraphes possédant leur propre zone de défilement. En fixant leur hauteur à 60vh, j’ai compris comment gérer un scroll interne indépendamment du scroll global de la page. L’ajout de barres de progression associées à chaque paragraphe m’a permis d’exploiter JavaScript pour calculer précisément la proportion de contenu déjà lue en fonction du défilement. L’utilisation des propriétés scrollTop, scrollHeight et clientHeight a été essentielle pour traduire le scroll en une valeur compréhensible pour l’utilisateur. Cet exercice m’a particulièrement aidé à comprendre comment transformer une interaction technique en information visuelle claire.
Voir l’exercice 3Exercice 4 – Scroll horizontal contrôlé par la molette
Cet exercice m’a permis de découvrir un comportement de scroll moins courant mais très intéressant en termes d’expérience utilisateur. En interceptant l’utilisation de la molette de la souris lorsque le curseur se trouve à l’intérieur d’un bloc, j’ai pu détourner le défilement vertical pour provoquer un défilement horizontal du contenu. Cela m’a aidé à comprendre la gestion des événements liés à la souris et la manière dont JavaScript peut modifier le comportement par défaut du navigateur. Cet exercice est particulièrement formateur, car il montre comment créer des interfaces originales tout en restant cohérent avec les actions naturelles de l’utilisateur.
Voir l’exercice 4Exercice 5 – Menu sticky sans modifier le HTML
Dans cet exercice, l’objectif était de rendre une barre de navigation collante en haut de la page après un certain défilement, sans modifier le HTML fourni. L’utilisation de la propriété CSS position: sticky m’a permis de comprendre son fonctionnement hybride entre relative et fixed. J’ai observé comment le menu se déplace normalement avec le contenu jusqu’à atteindre une position donnée, puis reste fixé à l’écran. Cet exercice est particulièrement pertinent dans un contexte professionnel, car il met en pratique une technique très utilisée dans les sites modernes pour améliorer la navigation tout en respectant des contraintes strictes sur la structure HTML.
Voir l’exercice 5Exercice 6 – Effet de parallaxe
Le dernier exercice consistait à réaliser un effet de parallaxe et à en expliquer le fonctionnement sous forme de tutoriel. En jouant sur le positionnement des éléments de fond et leur vitesse de déplacement différente par rapport au contenu, j’ai compris comment créer une illusion de profondeur uniquement avec le CSS. m’a permis de prendre du recul sur l’aspect pédagogique du développement front, en structurant non seulement le code, mais aussi l’explication de son fonctionnement.
Voir l’exercice 6