Création d'un indicateur de progression du scroll sur la page en HTML5 et CSS3. Pour se faire, j'ai eu recours à la propriété animation-timeline: scroll();
La propriété CSS animation-timeline définit la chronologie utilisée pour contrôler la progression d'une animation CSS. animation-timeline : scroll() définit l'élément racine, le défileur le plus proche ou l'élément lui-même comme une chronologie de progression de défilement anonyme, et éventuellement la direction de défilement du défileur.
Compatibilité des navigateurs :
- Chrome : version 115
- Edge : version 115
- Firefox : non compatible
- Opéra: version 101
- Safari : version 26
Lien vers le projet : https://aperbet56.github.io/scroll_indicator_progress_bar_in_css/
- Utilisation des balises sémantiques HTML5
- CSS3
- Flexbox
- Position fixed
- Animations CSS (@keyframes)
- Page web responsive
- Desktop first
- Commentaires HTML
- Commentaires CSS
- Importation des polices "Alata" et "Josefin Sans"
- Utilisation d'un normaliseur : le fichier normalize.css
- JavaScript
- Code JavaScript commenté