Tenho um script de progress bar, gostaria que a animação do preenchimento da barra de progresso fosse iniciado assim que o usuário rolasse a pagina até os elementos que serão animados.
Tentei usar $('.progress-bar').scroll(function() { etc...
, mas toda vez que uso o scroll do mouse reinicia a execução do script.
Gostaria que o script fosse executado apenas uma vez.
$('.skill-progress').each(function() {
$('.html-css.circle').circleProgress({
value: 0.87,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#EC6630', .5], ['#0096E6', .5]], gradientAngle: Math.PI / 5
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #EC6630;">HTML</span> / <span style="color: #0096E6;">CSS</span></i>');
});
$('.jq-js.circle').circleProgress({
value: 0.63,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#1169AE', .5], ['#EEAF4B', .5]], gradientAngle: Math.PI / 1.8
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #1169AE;">JQ</span> / <span style="color: #EEAF4B;">JS</span></i>');
});
$('.php-mysql.circle').circleProgress({
value: 0.47,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#8993BE', .5], ['#F88500', .5]], gradientAngle: Math.PI / 1.5
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #8993BE;">PHP</span> / <span style="color: #F88500;">MYSQL</span></i>');
});
$('.ps-cd.circle').circleProgress({
value: 0.53,
size: 160,
startAngle: -1.5,
fill: {
gradient: [['#5889C4', .5], ['#55A746', .5]], gradientAngle: Math.PI / 2
}
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html('<i><span style="color: #5889C4;">PS</span> / <span style="color: #55A746;">CDR</span></i>');
});
});
.circle {
margin: 6px 6px 20px;
display: inline-block;
position: relative;
text-align: center;
line-height: 1.2;
}
.circle strong {
position: absolute;
top: 51px;
left: 0;
width: 100%;
text-align: center;
line-height: 60px;
}
.circle strong i {
font-style: normal;
font-size: 1.4em;
font-weight: 300;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
<div class="html-css circle">
<strong></strong>
</div>
<div class="jq-js circle">
<strong></strong>
</div>
<div class="php-mysql circle">
<strong></strong>
</div>
<div class="ps-cd circle">
<strong></strong>
</div>
</div>
.each();
não virou em nada