Vous êtes ici : Accueil > Démonstrations > JavaScript

Scroll indicateur Animation Worklet

💡 L'objectif de cette démonstration est d'utiliser CSS Animation Worklet API, ici dans le but de créer un indicateur (sous la forme d'une barre progressive) à l'attention du visiteur sur ce qu'il reste de contenu à faire défiler sur la page. Surtout utile pour de longs articles. faîtes défiler la page pour voir la démonstration.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet egestas libero, ac feugiat massa. Vestibulum lobortis rutrum enim. Aliquam eu eros id ligula dignissim laoreet sed vitae lorem. Nulla facilisi. Quisque iaculis mauris a vestibulum tempus. Curabitur malesuada lacus orci, non vulputate magna varius at. Donec sit amet dignissim lacus. Ut vel orci felis. In finibus, nisi in feugiat semper, velit sem imperdiet sapien, nec egestas nibh leo eget dolor. In finibus lacinia ex, ut tincidunt elit imperdiet non. Sed a ornare est. Suspendisse at elit nec ex feugiat semper. Curabitur nec felis rutrum, consequat magna id, consequat eros. Duis non ornare erat, sit amet scelerisque ligula.



<div class="scroll-position-wrapper">
<div class="scroll-position"></div>
</div>
<script src="anim-worklet.js"></script>





<script>window.polyfillAnimationWorklet.import('worklet.js');</script>


Voir le script anim-worklet.js Voir le script worklet.js


.scroll-position-wrapper{

position: fixed;
z-index: 4;  /* à adapter selon la mise en page de votre site */
top: 0;
left: 0;
width: 100%;
overflow: hidden

}

.scroll-position{

background-image: linear-gradient(to left,#3cddc4 0,#7d68e8);
position: relative;
height: 5px;
left: -100%;
--animator:scroll-position-worklet scrollerElementReference

}



Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

Votre navigateur est trop ancien pour afficher le contenu de ce site.