Discussion :

[pierrot10]

Bonjour,

Sur ma page, j'ai des numéros. Par exemple

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="number" data-from="0" data-to="1131288">1131288</div>

J'utilise une librairie (jquery.countTo.js") qui va afficher l'incémentation de 0 à 1131288. Ceci fonctionne.

Ce que j'aimerais c'est que l'incémentation commence quand l'utilisateur scroll la page mais que lorsque les numéro sont visible. Si non, rien ne se passe.

J'ai trouvé une vielle librairie waypoints car apparemment, elle n'est pas mise à jour depuis 10 ans
Ne connaissant rien d'autre, j'essaye sans succès.

Ce que j'ai fait.

1. Import:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script src="assets/js/jquery-4.0.0.min.js"></script>
 
	<script src="assets/js/jquery.countTo.js"></script>
	<script src="assets/js/waypoints/lib/jquery.waypoints.min.js"></script>
	<script src="assets/js/script.js"></script>

2. dans script.js

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(window).on("load", function(){
	//  Show counter after appear
 
    var $number = $('.number');
    if ($number.length > 0 ) {
 
        $('.number').waypoint(function() {
            initCounter();
        }, {
            offset: '25%'
        })
 
    }
});
 
function initCounter(){
    $('.number').countTo({
        speed: 3000,
        refreshInterval: 50
    });
}

Je ne comprends pas pourquoi cette ligne

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.number').waypoint(function() {}

me génère cette erreur

Uncaught TypeError: t.isFunction is not a function
t jQuery
<anonymous> https://isite.ch/assets/js/script.js:8
jQuery 2

Si je regarde cette page

J'ai essayé ceci

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var waypoints = $('#handler-first').waypoint(function(direction) {
  notify(this.element.id + ' hit 25% from top of window') 
}, {
  offset: '25%'
})

et je l'ai modifié ainsi

Code JQUERY :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$('.number').waypoint(function(direction) {
  initCounter();
}, {
  offset: '25%'
})

mais sans mielleurs résulats

Si non connaitriez-vous quelque chose de plus récent?

Mercii

[Doksuri]

salut, pas besoin d'une Nieme lib pour ca. tu peux utilise le JS natif Intersection Observer developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API

[pierrot10]

Merci beaucoup, j'ai réussi à la faire aindi