Как сделать плавное изменения числа в калькуляторе ZeroBlock в Tilda
0
Special Offers
GET 30% OFF
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
$

Как сделать плавное изменения числа в калькуляторе ZeroBlock в Tilda

1
Создали ZeroBlock и добавили форму с ползунком и форму с калькулятором отдельно, который считает значения от ползунка
2
Полю с калькулятором задали имя total
3
Создали элемент текст в Zero и присвоили ему ссылку #numgrow
4
Добавили код на страницу, в блок Другое - Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Получить полное видео
Посмотреть все видео
Создаём плавное изменение итогового числа в форме ZeroBlock.
Длительность видео: 20 мин
Фрагмент видео
Посмотреть видео в личном кабинете ►
Библиотека для примера

<script>
$( document ).ready(function() {
    function divideNumberByPieces(x, delimiter) {
        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
    };
    $(".tn-atom__form").on('DOMSubtreeModified', ".t-calc", function() {
     
        setTimeout(function () {
	    $(function() {
	        var cLnum = 'a[href="#numgrow"]';
	        var numb_start =  +$(cLnum).html().replace(/\D+/g,"");
	        var numb_end = $('input[name="total"]').val();
	        $({numberValue: numb_start}).animate({numberValue: numb_end}, {
			    duration: 1700, 
			    easing: "swing",
			    step: function(val) {$(cLnum).html( divideNumberByPieces(Math.ceil(val)) );  
			}
		});
		
	    });
        }, 300);
	    
   });
});	
</script>
Made on
Tilda