Bonjour,
Je réalise actuellement un site one-page, l'une des sections comporte 6 barres à niveau, la progression de ces dernières doit s'éxécuter lorsque le scroll arrive au niveau de cette section.
je suis débutante en JS mais j'ai réalisé un script qui anime ces barres ainsi, cependant, si je continue de scroller, la progression de la barre continue et ça bug.
Je souhaiterais déclencher qu'une seule fois ce script, soit une fois la position du scroll définie est atteinte, la progression stop et ne se renouvelle pas.
Je vous remercie par avance, bonne journée :)
Laëtitia
Demo/exemple lien ci dessous :
https://jsfiddle.net/laetitiamodine/3La217v2/11/
$(window).scroll(function(){
if($(window).scrollTop() == 30){
$('.niveau').each(function() {
var valeur = $(this).data('niv');
var data = $(this).html("<span class='data-niv'>"+valeur+"</span>");
$(this).animate({
width: valeur
});
});
};
});
});
<h3>1</h3>
<div class="barre">
<div class="niveau" data-niv="90%"></div>
</div>
<h3>2</h3>
<div class="barre">
<div class="niveau" data-niv="70%"></div>
</div>
<h3>3</h3>
<div class="barre">
<div class="niveau" data-niv="60%"></div>
</div>```
<h3>4</h3>
<div class="barre">
<div class="niveau" data-niv="75%"></div>
</div>
<h3>5</h3>
<div class="barre">
<div class="niveau" data-niv="80%"></div>
</div>
<h3>6</h3>
<div class="barre">
<div class="niveau" data-niv="95%"></div>
</div>
.barre {
width:400px;
height:10px;
background:#C8DFDF;
margin:20px 100px 100px 100px;
}
.niveau {
height:10px;
background: #161E28;
width:1px;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
transition: width 1s ease;
}