Bonjour,

Je suis nouveau avec JQuery et je suis crée un site avec Bootsrap (1ère fois aussi).

J'aimerai faire une barre de progrès qui s'anime de gauche à droite lorsque qu'on scroll dessus.

J'ai réussi a faire animer les barres de gauche à droite mais j'aimerais que l'animation se déclanche quand l'internaute scroll dessus et pas lorsque la page se charge.

Voici mon code : http://jsfiddle.net/as2gv/8/

mo animation jquery :

$(function () {

$(bar).each(function () {

bar_width = $(this).attr('aria-valuenow');

$(this).width(bar_width + '%');

});
});

Pouvez me donner un coup de main s'il vous plait ?

Merci

Quand il arrive sur la zone, l'animation commence ? Si oui, tu peux regarder du côté de la bibliothèque Waypoint.js, qui permet de lancer des évènements en fonction de la position de l'utilisateur sur la page.

Si tu veux que ce soit le scroll de l'utilisateur sur le div qui fasse avancer la barre de défilement (genre il scroll, ça avance ; il s'arrête, ça s'arrête ; il reprend, ça reprend à son rythme, ...) là tu peux regarder du côté des bibliothèques Parallax.js ou, plus simple, stellar.js qui permettent de contrôler des évènements _avec_ le scroll de l'utilisateur.

Oui je veux que quand il arrive sur la zone, l'animation commence. Je regarde waypoints.js mais je me demande comment l'intégrer avec mon code actuel: http://jsfiddle.net/as2gv/8/

code a intégrer avec waypoints : $('#example-basic').waypoint(function() {
notify('Basic example callback triggered.');
});

JQUERY

Pure JS > All

Waypoints ne marche pas du tout chez moi. y'a t'il un autre moyen ?