Bonjour,

Je bloque depuis maintenant plusieurs heures, et j'ai essayé tant de choses que je ne peux tout me rappeler.

En fait, j'essaie de lancer l'animation d'une "barre" de progression : celle-ci se trouve plus bas dans ma page, et je voudrais que l'animation se lance quand je vois la barre de progression sur mon écran (c'est-à-dire après avoir scrollé jusqu'à elle, et que l'animation ne se lance qu'une seule fois).

Voici le code que j'ai :

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<svg id="symfony" viewbox="0 0 100 100" onload="launchAnimation('symfony', 'symfonyCount', 20)">
    <circle cx="50" cy="50" r="45" fill="#3F3B48"/>
    <path id="progress" stroke-linecap="round" stroke-width="5" stroke="#fff" fill="none"
          d="M50 10
             a 40 40 0 0 1 0 80
             a 40 40 0 0 1 0 -80">
    </path>
    <text class="merriweather" x="50" y="45" text-anchor="middle" dy="7" font-size="13" style="fill: white">Symfony</text>
    <text id="symfonyCount" x="50" y="60" text-anchor="middle" dy="7" font-size="8" style="fill: white">100%</text>
  </svg>

svg {
width: 30%;
}

function launchAnimation(svg_name, count_name, percentage) {
      var circle_value = (percentage * 250 / 100);
      var count = $(('#' + count_name));
      $({ Counter: 0 }).animate({ Counter: count.text() }, {
        duration: 4000,
        easing: 'linear',
        step: function () {
          if(this.Counter <= percentage) {
            count.text(Math.ceil(this.Counter)+ "%");
          }
        }
      });

      var s = Snap('#' + svg_name);
      var progress = s.select('#progress');

      progress.attr({strokeDasharray: '0, 251.2'});
      Snap.animate(0,251.2, function(value) {
        if(value <= circle_value) {
          progress.attr({ 'stroke-dasharray':value+',251.2'});
        }
      }, 4000);
}

Je vous met ici un lien pour le faire tourner en ligne : https://codepen.io/Skaikru/pen/RzzjXr

Ici, je lance mon animation dès que la page se charge. 

J'ai essayé des plugins, et d'autres petites choses, mais je ne sais même plus comment prendre le problème, puisque l'animation ne devrait se lancer qu'une seule fois quand après que la page aie été chargée.

Si vous avez des idées, ce serait vraiment génial, parce que je ne sais plus quoi faire

Merci beaucoup !

Bonjour,

Après, pour une solutions compatible avec les anciens navigateurs, si l'éléments que tu souhaite animer ce trouve toujours en bas de pages, tu peut juste surveiller l'événement onscroll et lorsque window.pageYOffset et égale à scrollTop+clientHeight ça signifie que la scrollbar ce situe tout en bas.

La méthode en elle même est sale, mais niveau compatibilité c'est la meilleurs pour le moment.
Après, si tu travaille sur un truc juste pour toi, ou que tu te fiche des gens avec des vieux navigateur, la solution de MatTheCat reste la meilleurs.

Merci beaucoup de vos réponses, je suis en train de regarder tout ça ! Mais du coup le mieux pour moi serait Intersection Observer

Par contre, même en ayant ça, je ne vois pas trop comment je fais en sorte que ma fonction ne se lance qu'une seule fois (et pas à chaque fois que j'ai l'écran dessus)

Tu enregistre dans une variable global le nombre d'exécution de ta fonction, si le nombre et < à 1 alors tu exécuté la fonction.

Edit: sans difficulté '-' 

-
Edité par Angelisium 16 juillet 2019 à 8:19:43

Merci !

Et désolée, je crois que j'avais trouvé une solution, mais impossible pour moi d'éditer un de mes messages sur ce sujet (bizarre non ? Toi tu y arrives ?). Et on ne peut pas écrire de nouveau message avant 24h donc...

Je vais essayer tout ça, et je vous tiens au courant (dès que je peux, puisque je ne pourrai pas éditer ce message haha)

Merci de votre aide

Pour n'executer le callback qu'une fois on pourra y appeler la méthode disconnect de l'observer. Et tant qu'à faire lui assigner null pour su'il puisse libérer la mémoire.

Concernant l'événement scroll si on est forcé de l'utiliser alors on n'oubliera pas le mode passif : https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners

Mais ici l'animation n'a qu'un but esthétique donc la compatibilité n'est pas une priorité. D'ailleurs IMHO elle devrait être accélérée ! 

Merci beaucoup ! Grâce à vos réponses j'ai pu travailler une heure dessus et le finir (hier j'y avais passé la journée sans vraiment avancer)

Je met le code que j'ai utilisé ici, si ça peut un jour aider quelqu'un :

let compteurs = { "javascript" : "javascriptCount", "bootstrap" : "bootstrapCount" };
    let pourcentages = { "javascript" : 60, "bootstrap" : 90 }

    let observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.isIntersecting) {
        launchAnimation(entry.target.id, compteurs[entry.target.id],  pourcentages[entry.target.id]);
        observer.unobserve(entry.target);
      }
    });
    }, {threshold: 1});

    document.querySelectorAll('svg').forEach(svg => { observer.observe(svg) });

Merci encore