[RÉGLÉ] Animation d'un nombre avec JQuery

[fynhooft]

Bonjour,

J'ai installé sur mon site un script qui affiche un nombre sous forme d'animation comme sur ce site : http://demo.joomshaper.com/page-buil...php?Itemid=175
Ce script, je l'ai trouvé sur cette page : http://jsfiddle.net/Yy6r6/70/
En ajoutant un peu de css, il fonctionne correctement comme sur la page de démo de Joomshaper.

Le problème c'est qu'il est animé uniquement au chargement de la page. Malheureusement, le nombre à animer n'est pas visible au chargement mais quand on scrolle. Résultat : l'animation est terminée quand le nombre s'affiche.
N'étant pas un spécialiste de JQuery, je voudrais savoir quel est le code à ajouter pour que l'animation se déclenche à chaque fois que le nombre apparaît à l'écran lors d'un scroll.

Merci d'avance aux spécialistes JQuery.

[fynhooft]

Re : Animation d'un nombre avec JQuery

Bonjour,

N'y aurait-il pas de spécialistes jQuery sur le forum de Joomla ?

[messinmaisoui]

Re : Animation d'un nombre avec JQuery

Bonjour,
J'ai installé sur mon site un script ...

N'y aurait-il pas de spécialistes jQuery sur le forum de Joomla ?

Voir aussi à poser la question sur des sites comme
https://openclassrooms.com/forum/categorie/javascript
ou
http://www.developpez.net/forums/f11...eworks/jquery/

[manu93fr]

Re : Animation d'un nombre avec JQuery

Bonjour,

N'y aurait-il pas de spécialistes jQuery sur le forum de Joomla ?

Tu as du surement te rendre compte qu'on est sur un forum dédié a Joomla, pas a Jquery ou Php
Tout le monde n'est pas développeur ! La majorité sont des utilisateurs de ce Cms ...

Pour ton soucis, une recherche dans Google et tu as plus de 100 réponses !!! Comme celle-ci ... a toi d'appliquer

[ghazal]

Re : Animation d'un nombre avec JQuery

Salut,
j'ai corrigé il y a qq temps un module qui fait cet effet :

https://dl.dropboxusercontent.com/u/32803028/forum/mod_msdecompte-2.5.zip

Teste et raconte-moi.

La discussion est là :
[RÉGLÉ] Conflit jquerry

http://forum.joomla.fr/showthread.php?210358-Conflit-jquerry

[fynhooft]

Re : Animation d'un nombre avec JQuery

Bonjour Ghazal,

J'ai installé le module que tu as fourni. Il s'affiche mais tous les compteurs sont à zéro et il n'évoluent pas.
J'ai regardé le code. C'est un peu compliqué par rapport à mes 10 lignes (cf http://jsfiddle.net/Yy6r6/70/ )

De plus, mon compteur ne décompte pas un temps. Il affiche simplement le nombre de tutoriels présents sur mon site GIMPons : ce n'est donc qu'un nombre que l'on voit s'incrémenter de 0 au nombre de tutos.
Mon souci, c'est que le nombre s'anime quand la page est activée. Or, le nombre est placé très bas dans celle-ci et l'animation est terminée quand on arrive sur le nombre.
C'est pour cela que je voudrais que l'animation démarre quans le nombre apparait à l'écran lors d'un scroll.

Il faut donc modifier le script de façon à ce que l'apparition de <span class="Count"> déclenche l'animation. Voilà ce que j'ai fait, j'ai remplacé ce code :

<script>
$('.Count').each(function ()
	{
		var $this = $(this);
		jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {duration: 2000,
    easing: 'swing',
    step: function (i) {$this.text(Math.ceil(i));}
  });
});
</script>

par celui-ci :

<script>
[COLOR="#FF0000"]$('.Count').scroll(function (){[/COLOR]
$('.Count').each(function ()
	{
		var $this = $(this);
		jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {duration: 2000,
    easing: 'swing',
    step: function (i) {$this.text(Math.ceil(i));}
  });
});
[COLOR="#FF0000"]});[/COLOR]
</script>

... mais je n'ai plus aucune animation ni à l'affichage de la page ni au scroll.
C'est quoi le mystère ?

[ghazal]

Re : Animation d'un nombre avec JQuery

Je pense qu'on peut adapter ce script, qui correspondrait, d'après ce que je comprends, à ce que tu recherches :

Counter Up Demo

http://bfintal.github.io/Counter-Up/demo/demo.html

[ced1870]

Re : Animation d'un nombre avec JQuery

salut
en effet il faut
- détecter le scroll sur ta page et lui affecter un mouchard
- vérifier la position de ton compteur pendant le scroll
- lorsque ton compteur apparait à l'écran, alors tu lui déclenche ton code

Essaies un truc du genre

$(window).bind('scroll', function() {
$('.Count').each(function () {
if ( ($(window).scrollTop() + $(window).height()) > $(this).offset().top && !$(this).hasClass('finished')) {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function (i) {
$this.text(Math.ceil(i));
},
complete : function() {
$this.addClass('finished');
}
});
}
}
});

à tester parce que je l'ai écrit à l'arrache, mais ça pose l'idée
CEd

[fynhooft]

Re : Animation d'un nombre avec JQuery

Bonjour,

A ghazal, ton exemple déclenche bien les compteurs lors d'un scroll vers le bas mais si on sroll alors vers le haut, il ne se déclenche plus !

A ced1870, ton code ne déclenche aucune animation ni à l'affichage ni au scroll. Comme tu dis, "écrit à l'arrache" mais je ne suis pas compétent en jQuery pour comprendre ce qui ne fonctionne pas. Fait un copier-coller de ton code sur cette page pour vérifier http://jsfiddle.net/Yy6r6/70/ et tu cliques sur le bouton "run". Je pense que cela pourrait faire un beau petit module nombreCK, non ?

[ghazal]

Re : Animation d'un nombre avec JQuery

A ghazal, ton exemple déclenche bien les compteurs lors d'un scroll vers le bas mais si on sroll alors vers le haut, il ne se déclenche plus !

Oui.
Mais pourquoi redéclencher les compteurs en scroll up ?
Tu indiques un nbr fini de tutos, point-barre.

Ici, tu as un exemple "live" sur les "Shares"
10 jQuery snippets every designer should know

http://www.webdesignerdepot.com/2014/01/10-jquery-snippets-every-designer-should-know/

Scroll vers ->Conclusion
Scroll-up ne déclenche rien.

[ced1870]

Re : Animation d'un nombre avec JQuery

effectivement j'avais un souci parce qu'il ne faut pas que l'animation soit lancée plusieurs fois sur l'élément, voici un code fonctionnel

/*$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function (i) {
$this.text(Math.ceil(i));
}
});
});*/
$(window).bind('scroll', function() {
$('.Count').each(function (i, counter) {
var $this = $(counter);

if ( ($(window).scrollTop() + $(window).height()) > $this.offset().top && !$this.hasClass('started')) {
$this.addClass('started');
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function (i) {
$this.text(Math.ceil(i));
},
complete : function() {

},
});
}
});
});

http://jsfiddle.net/Yy6r6/461/

mais ça fait pareil que le lien de Ghazal. je suis d'accord avec ghazal sur le fait qu'une fois que le nombre est défilé, c'est fini

@ghazal : bon finalement j'ai quand meme codé ce we ...

[ghazal]

Re : Animation d'un nombre avec JQuery

@ghazal : bon finalement j'ai quand meme codé ce we ...

Pas de surprise :-) . Quand on nous lance un os à ronger ....

Et ta correction fonctionne nickel.

[fynhooft]

Re : Animation d'un nombre avec JQuery

mais ça fait pareil que le lien de Ghazal. je suis d'accord avec ghazal sur le fait qu'une fois que le nombre est défilé, c'est fini

D'abord merci d'avoir travaillé un dimanche. Je n'aurais jamais réussi à modifier le code comme tu l'as fait.

Mon souci c'est que sur mon site, en reconstruction, j'ai déjà quelques animations (qui utilisent animate.css) qui fonctionnent dans les deux sens du scrolling. Je voudrais simplement être homogène avec les autres animations.

[electrocity]

Re : Animation d'un nombre avec JQuery

Pourquoi faire simple quand on peut faire compliqué
Un site web n'est pas une démo. Je ne vois pas pourquoi se casser la tête pour un compteur, a part si celui-ci est important

[ced1870]

Re : Animation d'un nombre avec JQuery

@patrick : bah tu sais de nos jours les sites sont tout sauf utiles ...