Animation d'un nombre avec JQuery

[ced1870]

Re : Animation d'un nombre avec JQuery

tu peux jeter un oeil à la nouvelle démo

http://jsfiddle.net/Yy6r6/463/

ça a l'air de tourner

copie du code

$(window).bind('scroll', function() {
    var wintop = $(window).scrollTop();
    var winheight = $(window).height();
	$('.Count').each(function (i, counter) {
        var $this = $(counter);
        var eltop = $this.offset().top;
        var elheight = $this.outerHeight(true);
        
        if (eltop + elheight < wintop || eltop > wintop + winheight) {							if (!$this.hasClass('running')) {	$this.removeClass('started');    
                                                                     }
		}
        
		if ( (wintop + winheight) > eltop && !$this.hasClass('started')) {
            $this.addClass('started').addClass('running');
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 1000,
                easing: 'swing',
                step: function (i) {
                $this.text(Math.ceil(i));
                },
                complete : function() {
				$this.removeClass('running');
                },
            });
		}
	});
});

[ghazal]

Re : Animation d'un nombre avec JQuery

La nouvelle mouture fonctionne.

Un site qui use et abuse de compteurs, d'une manière très intéressante :
2015 Subtraction.com Design Tools Survey | Wireframing

http://tools.subtraction.com/wireframing.html

Mais les devs/UX designers ne s'amusent pas à faire redémarrer les compteurs une fois la page chargée.

On a dans ce cas un double message inutile.
Je scroll down, j'ai une info
Je scroll up, ah un truc redémarre, aurai-je une autre info ?

[fynhooft]

Re : Animation d'un nombre avec JQuery

Bonjour,

J'ai copié-collé ton code : http://jsfiddle.net/Yy6r6/463/
... Mais il Ne fonctionne pas sur mon site.

L'animation démarre au chargement de la page : on la voit uniquement si on se dépêche de scroller sinon elle est déjà terminée.
De nouveaux scrolls vers le haut ou le bas ne font pas redémarrer l'animation.

Si on actualise la page alors que le nombre est à l'écran, l'animation ne démarre pas.

A ghazal, va voir sur ce site cela scroll dans un sens et dans l'autre : http://johnpolacek.github.io/scrollorama/

[ced1870]

Re : Animation d'un nombre avec JQuery

donnes nous l'url de ta page pour voir ce qui cloche

[manu93fr]

Re : Animation d'un nombre avec JQuery

A ghazal, va voir sur ce site cela scroll dans un sens et dans l'autre : http://johnpolacek.github.io/scrollorama/

Oui mais se sont des animations de texte figé ... pas un compteur dynamique qui donne une info précise
Enfin, les gouts et les couleurs ....

[fynhooft]

Re : Animation d'un nombre avec JQuery

donnes nous l'url de ta page pour voir ce qui cloche

Je ne peux pas : mon site est en local. Je n'ai pas terminé la nouvelle version de GIMPons.

Essayes en local sur un de tes sites. Je pense que tu auras les mêmes résultats.

Mettre dans le fichier "index.php" du template juste avant la balise </body>

<!-- animation nombre : debut --> 
<script>
$(window).bind('scroll', function() {
    var wintop = $(window).scrollTop();
    var winheight = $(window).height();
	$('.Count').each(function (i, counter) {
        var $this = $(counter);
        var eltop = $this.offset().top;
        var elheight = $this.outerHeight(true);
        
        if (eltop + elheight < wintop || eltop > wintop + winheight) {							if (!$this.hasClass('running')) {	$this.removeClass('started');    
                                                                     }
		}
        
		if ( (wintop + winheight) > eltop && !$this.hasClass('started')) {
            $this.addClass('started').addClass('running');
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 2000,
                easing: 'swing',
                step: function (i) {
                $this.text(Math.ceil(i));
                },
                complete : function() {
				$this.removeClass('running');
                },
            });
		}
	});
}); 
</script>
<!-- animation nombre : fin -->

Dans l'article où se trouvera le nombre animé, mettre :

<span class="Count">866</span>

où 866 est, ici, le nombre final de l'animation

dans le fichier custom.css du template, mettre :

.Count{font-size:5rem;text-align:center;font-weight:500;margin-bottom:2rem;}

[ced1870]

Re : Animation d'un nombre avec JQuery

Effectivement il me manquait l'encapsulation pour $
voici un code testé chez moi

(function( $ ){
$(window).bind('scroll', function() {
    var wintop = $(window).scrollTop();
    var winheight = $(window).height();
	$('.Count').each(function (i, counter) {
        var $this = $(counter);
        var eltop = $this.offset().top;
        var elheight = $this.outerHeight(true);

        if (eltop + elheight < wintop || eltop > wintop + winheight) {
			if (!$this.hasClass('running')) {
				$this.removeClass('started');    
			}
		}
        
		if ( (wintop + winheight) > eltop && !$this.hasClass('started')) {
            $this.addClass('started').addClass('running');
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 2000,
                easing: 'swing',
                step: function (i) {
					$this.text(Math.ceil(i));
                },
                complete : function() {
					$this.removeClass('running');
                },
            });
		}
	});
}); 
} )(jQuery);

- - - Mise à jour - - -

PS : http://jsfiddle.net/Yy6r6/464/

[fynhooft]

Re : Animation d'un nombre avec JQuery

...
Cela fonctionne.

Une dernière question avant de clôturé le sujet.
Ce post m'a fait découvrir jQuery et tout ce que l'on pouvait faire avec. Aussi, comme j'aimerais bien comprendre le code que tu as écrit, pourrais-tu, s'il te plaît, me conseiller quelques tutos sur jQuery ?
Merci d'avance.

[ced1870]

Re : Animation d'un nombre avec JQuery

Heu ... Ghazal au secours ! il me pose une colle !
Sérieusement ça fait longtemps que je n'ai regardé un vrai tuto, regardes sur openclassroom, et de mon côté j'utilise beaucoup la documentation qui est sur le site officiel de jQuery.

Info intéressante par contre, sur ce forum il y a une section jQuery que nous gérons avec Ghazal, plus ou moins

http://forum.joomla.fr/forumdisplay.php?149-JQuery

Donc tu pourras poster tes demandes spécifiques dans cette partie du forum.

[fynhooft]

Re : Animation d'un nombre avec JQuery

... Encore merci pour ton dévouement.
Merci également à ghazal.

On attend maintenant le module nombreCK

[ghazal]

Re : Animation d'un nombre avec JQuery

J'arrive après la bagarre.

Perso, l'apprentissage passif me gave.
Il commence à exister des sites interactifs d'apprentissage de code, comme :

Learn to Code by Doing - Code School

https://www.codeschool.com/

Pour le JS et jQuery, le premier cours est gratuit

et celui-là, gratuit, avec des exos à faire :
JavaScript | Codecademy

https://www.codecademy.com/tracks/javascript

Je ne connais que ces 2 là, mais je suppose qu'il y en d'autres.

[lefabdu51]

Re : Animation d'un nombre avec JQuery

J'arrive apràs la bagarre.

Perso, l'apprentissage passif me gave.
Il commence à exister des sites interactifs d'apprentissage de code, comme :

Learn to Code by Doing - Code School

https://www.codeschool.com/

Pour le JS et jQuery, le premier cours est gratuit

et celui-là, gratuit, avec des exos à faire :
JavaScript | Codecademy

https://www.codecademy.com/tracks/javascript

Je ne connais que ces 2 là, mais je suppose qu'il y en d'autres.

Celui que j'utilise. Quand on vois les effets du code, on comprend plus vite.

http://www.w3schools.com/jquery/default.asp