Créer une barre de progression


web #Outils web

Je vous propose aujourd’hui un petit effet sympa vu sur quelques sites-web que je lis. Il s’agit d’une barre e couleur, le plus souvent horizontale qui vous montre la progression de la lecture de la page web que vous visitez. Voici un morceau de code trouvé sur le web et un aperçu de ce que cela peut donner.

Le code

Le morceau de code a été trouvé sur le site suivant. C’est le même effet qu’on peut voir tout en haut du site d’alsacreations, dont je vous ai déjà parlé. Voici le code :

Ma touche perso

J’ai ajouté à la ligne 16 & 17, un calcul assez simple qui permet d’afficher en pourcentage, la progression de la lecture.

Conclusion et pour aller plus loin

Le plus fort dans cet effet, c’est la simplicité de son code, son calcul et la façon dont c’est pensé. En réalité, cette barre de progression est mue grâce à l’événement javascript « scroll » et qui permet de créer une action lors du scroll de la page visitée. Pour aller plus loin, on pourrait imaginer d’autres effets au fur et à mesure que l’on se trouve dans le bas de la page comme par exemple un dégradé de plus en plus sombre lorsqu’on arrive dans le « fond » de la page.

Date de l'article : Le 10 juin 2020 à 10:39
Outils : Html, Css, Jquery

Merlin

Diplômé d'un baccalauréat en Communication et Journalisme, j'ai maintenant terminé ma formation de Web-Designer/concepteur d'interface pour entrer dans le monde du web qui me passionne depuis toujours. Bienvenue sur mon blog et bonne visite !