Création d'une barre de progression en HTML5 et CSS3 uniquement. Elle exploite la puissance de la propriété animation-timeline: scroll() qui relie directement la progression de l'animation à votre position de défilement.
Au fur et à mesure que vous faites défiler la page, la barre de progression se remplit en parfaite synchronisation avec vos mouvements. C'est une façon subtile mais efficace d'améliorer l'expérience utilisateur.
Les keyframes jouent également un rôle crucial, définissant le comportement de l'animation. Dans ce projet, il s'agit d'un simple changement de largeur de 0 à 100 %.
Le résultat ? Une animation fluide et naturelle qui semble intuitive et performante.
Le seul inconvénient pour l'instant est la prise en charge par les navigateurs. En effet, tous les navigateurs ne prennent pas en charge la propriété animation-timeline. Pour que le projet fonctionne, utilisez une version récente du navigateur Chrome !
Lien vers le projet : https://aperbet56.github.io/progress_bar_in_css_only/
- Utilisation des balises sémantiques HTML5
- CSS3
- Animations CSS (@keyframes)
- Commentaires HTML
- Commentaires CSS
- Page web responsive
- Importation des polices "Montserrat" et "Open Sans"
- Utilisation d'un normaliseur : le fichier normalize.css