Je vous propose aujourd’hui un petit effet sympa vu sur quelques sites-web que je lis. Il s’agit de créer une barre de progression en 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.
