spincrement - анимация не только цифр
Доброго дня!
Есть простая анимация чисел при прокрутке на 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"); }); }); В итоге должно получиться так: (блин, тут анимация не работает) ![]() |
|
рони,
спасибо большое! получил ответы абсолютно на все вопросы! :victory: |
Часовой пояс GMT +3, время: 09:50. |