Доброго дня!
Есть простая анимация чисел при прокрутке на jQ-скрипте
spincrement. Она работает. Тут всё в порядке.
Но можно ли кроме чисел сделать и
анимацию полосок (типа прогресс-бар) ?
Чтобы проще было понимать:
Всё собрал вот здесь
https://jsfiddle.net/tps20/fdo1px25/
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Number-Increment-Animations-with-jQuery-spincrement/jquery.spincrement.js"></script>
<div class="int-fact-counters">
<small class="vc_label">Средний результат за день</small>
<div class="int-fct-item">
<div class="skillbar-bar">
<span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
<div class="pointerval" style="width: 85%;">
</div>
</div>
<div class="fct-count-1">95</div>
</div>
<small class="vc_label">Сегодня</small>
<div class="int-fct-item">
<div class="skillbar-bar">
<span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
<div class="pointerval" style="width: 85%;">
</div>
</div>
<div class="fct-count-2">80</div>
</div>
<small class="vc_label">Вчера</small>
<div class="int-fct-item">
<div class="skillbar-bar">
<span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
<div class="pointerval" style="width: 85%;">
</div>
</div>
<div class="fct-count-3">65</div>
</div>
<small class="vc_label">Позавчера</small>
<div class="int-fct-item">
<div class="skillbar-bar">
<span class="vc_bar " data-percentage-value="85" data-value="85" style="background-color: rgb(33, 33, 33); width: 85%;"></span>
<div class="pointerval" style="width: 85%;">
</div>
</div>
<div class="fct-count-4">50</div>
</div>
</div>
// spincrement
$(document).ready(function(){
function countup(className){ //className - имя класса, в котором есть число
var countBlockTop = $("."+className).offset().top; //смещение блока с числом относительно верхнего края
var windowHeight = window.innerHeight;//высота окна браузера
var show = true;// отвечает, что если один раз счетчик сработает, больше не срабатывал
$(window).scroll( function (){
if(show && (countBlockTop < $(window).scrollTop() + windowHeight)){
show = false; //если мы видим число, то больше его не надо показывать
$('.'+className).spincrement({ //вызов плагина с параметрами
from: 1, //начинать с 1
duration: 4000, //задержка счетчика
});
}
})
}
$(function() {
countup("fct-count-1");
countup("fct-count-2");
countup("fct-count-3");
countup("fct-count-4");
});
});
В итоге должно получиться так: (блин, тут анимация не работает)
