Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.04.2021, 22:17
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 36

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");
        });
});


В итоге должно получиться так: (блин, тут анимация не работает)
Ответить с цитированием
  #2 (permalink)  
Старый 19.04.2021, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,425

tp-20,
https://javascript.ru/forum/dom-wind...tml#post494744
Ответить с цитированием
  #3 (permalink)  
Старый 19.04.2021, 23:56
Аспирант
Отправить личное сообщение для tp-20 Посмотреть профиль Найти все сообщения от tp-20
 
Регистрация: 19.06.2018
Сообщений: 36

рони,
спасибо большое! получил ответы абсолютно на все вопросы!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация чисел при скролле до элемента min89 jQuery 7 13.07.2015 15:07
Разрешить ввод только цифр sv. Events/DOM/Window 2 21.03.2015 15:02
AJAX, Только передача данных. NewJSUser AJAX и COMET 14 12.01.2015 16:38
Анимация на чистом JS Tecvid Events/DOM/Window 12 27.11.2014 11:46
Возможность ввода только цифр и запятой Катерина Общие вопросы Javascript 11 25.06.2014 23:08