Скрипты для uKit 27.01.2018 25 6614
Анимированные цифры для uKit

Анимированные цифры для uKit

Этот скрипт позволяет анимировать цифры на сайте, что придаст динамику сайту и в более наглядной форме покажет рост компании. Контекст чисел вы определяете самостоятельно.

Например можно указать количество клиентов кампании и срок присутствия на рынке, как в примере ниже. Все зависит о фантазии владельца бизнеса.
 
В целом добавление анимации на некоторых элементах сайта положительно вляет на его восприятие в целом и заметно «оживляет» страницу, главное, чтобы она не мешала восприятию самого важного – контента (текстов и изображений), ведь не каждый посетитель готов ждать 10-ти секундного появления описания товара или для просмотра его изображения.

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код

<script>
    require(['jquery'], function($){
        var animate_block = ['#ul-id-0-0'];  // Блок, где не нужна анимация
        
        // plugin jquery-spincrement
        !function(t){t.extend(t.easing,{spincrementEasing:function(t,a,e,n,r){return a===r?e+n:n*(-Math.pow(2,-10*a/r)+1)+e}}),t.fn.spincrement=function(a){function e(t,a){if(t=t.toFixed(a),a>0&&"."!==r.decimalPoint&&(t=t.replace(".",r.decimalPoint)),r.thousandSeparator)for(;o.test(t);)t=t.replace(o,"$1"+r.thousandSeparator+"$2");return t}var n={from:0,to:null,decimalPlaces:null,decimalPoint:".",thousandSeparator:",",duration:1e3,leeway:50,easing:"spincrementEasing",fade:!0,complete:null},r=t.extend(n,a),o=new RegExp(/^(-?[0-9]+)([0-9]{3})/);return this.each(function(){var a=t(this),n=r.from;a.attr("data-from")&&(n=parseFloat(a.attr("data-from")));var o;if(a.attr("data-to"))o=parseFloat(a.attr("data-to"));else if(null!==r.to)o=r.to;else{var i=t.inArray(r.thousandSeparator,["\\","^","$","*","+","?","."])>-1?"\\"+r.thousandSeparator:r.thousandSeparator,l=new RegExp(i,"g");o=parseFloat(a.text().replace(l,""))}var c=r.duration;r.leeway&&(c+=Math.round(r.duration*(2*Math.random()-1)*r.leeway/100));var s;if(a.attr("data-dp"))s=parseInt(a.attr("data-dp"),10);else if(null!==r.decimalPlaces)s=r.decimalPlaces;else{var d=a.text().indexOf(r.decimalPoint);s=d>-1?a.text().length-(d+1):0}a.css("counter",n),r.fade&&a.css("opacity",0),a.animate({counter:o,opacity:1},{easing:r.easing,duration:c,step:function(t){a.html(e(t*o,s))},complete:function(){a.css("counter",null),a.html(e(o,s)),r.complete&&r.complete(a)}})})}}(jQuery);
        
        var numbers = {
        
            // Проверка родителя
            test_parent: function(elem){
                var res = false;
                if(animate_block.length > 0){
                    animate_block.forEach(function(val, key){
                        if(elem.parents(val).length > 0) res = true;
                    });
                }
                return res;
            },
            
            // Старт
            init: function(){
                // Ищем цифры
                $('[class*="row ul-row"] div, [class*="row ul-row"] p, [class*="row ul-row"] span').each(function(i){
                    if($(this).find('*').length == 0 && numbers.is_num($(this)) == true && $(this).parents('.ul-w-contacts-list').length == 0 && numbers.test_parent($(this)) != true){
                        numbers.num_in_span($(this));
                        $(this).attr('data-anim', ''+i+'');
                    }
                });
                
                // Ловим скролл
                if($('.anim_number').length > 0){
                    numbers.scrolling();
                }
            },
            
            // Анимация при скроле
            scrolling: function(){
                var blockStatus = [];  
                $(window).scroll(function(){
                $('.anim_number').each(function(i){
                    var th_elem = $(this),
                        scrollTop = $(window).scrollTop(), windowHeight = $(window).height();
                    
                    if(scrollTop <= th_elem.offset().top && (th_elem.height() + th_elem.offset().top) < (scrollTop + windowHeight)){
                        if(!blockStatus[i]){
                            blockStatus[i] = true; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы. 
                            $({numberValue: 0}).animate({numberValue: th_elem.attr('data-to')}, { 
                                duration: 6500, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
                                easing: "linear", 
                                step: function(val) {  
                                    th_elem.html(Math.ceil(val)); // Блок, где необходимо сделать анимацию 
                                    $('.anim_number[data-to=""]').hide();
                                } 
                            });
                        }
                    }
                });
                });
            },
            
            // Есть ли цифра
            is_num: function(elem){
                var nums = $.trim(elem.html().replace(/\D+/g, ''));
                if(nums > 0) return true;
                return false;
            },
            
            // Цифру в span
            num_in_span: function(elem){
                var text = elem.text(),
                    nums = $.trim(text.replace(/\D+/g, '|')),    // все цифры через |
                    nums_arr = nums.split('|');                 // Массив с цифрами
                    
                nums_arr.forEach(function(item, i){
                    text = text.replace(''+item+'', '<span class="anim_number" data-from="0" data-to="'+item+'">'+item+'</span>');
                });

                elem.html(text);
            }
        }
        
        numbers.init();
        
    });    
</script>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 25
avatar
1
Здравствуйте! Хотелось бы на конкретном примере (скриншоте) увидеть, в каком  именно месте кода нужно поставить цифры, приведенные в вашем примере.
avatar
1
4
Анимация активируется для всех цифр на сайте, в коде же вы можете задать необходимые блоки для которых анимация вам не нужна
avatar
8
Отключаю блоки, таким образом var animate_block = ['#ul-id-389-36' '#ul-id-389-36']; Перестает работать анимация цифры, или запятую надо между ними?
avatar
0
9
Да, необходима запятая
avatar
2
Добрый день! Хотел попробовать и посмотреть работоспособность скрипта, но результата нет то есть при разных вариациях (виджетов текст, таймлайм, этапы), не работает ничего не анимируется.
avatar
0
3
Установите, пожалуйста, код и покажите сайт
avatar
5
https://georgian-cheese.ru/
avatar
0
6
У вас какая-то проблема со скриптами на сайте, код если установлен, то не отображается здесь: view-source:https://georgian-cheese.ru. Видимо какие-то коды установлены не правильно.
Можете попробовать расположить код по выше, но также в <body>: https://screenshot.ukit.com/src/sup/2018-02-05-23-20-33.png
avatar
7
А можно сделать наоборот - указать блок где нужна анимация?
avatar
25
согласен, было бы логичнее сделать именно так
avatar
10
Подскажите, где в коде вставить ID блок, где нужна анимация?
avatar
11
Нужно ставить только те блоки в которых она НЕ нужна или любой один если в других ее не предвидится!
avatar
12
Вот я и хочу вставить один, а то даже телефон с анимацией цифр. Только не пойму где в коде его вставить.
avatar
13
require(['jquery'], function($){
var animate_block = ['#ul-id-0-0']; // Блок, где не нужна анимация
Вот вместо #ul
avatar
14
Нее, где нужна анимация. Блоков очень много вставлять лень, если нужно только один, который нужен.
avatar
15
Пока тут только один способ, вставлять только не нужные.
avatar
16
th_elem.html(Math.ceil(val)); // Блок, где необходимо сделать анимацию 
                                    $('.anim_number[data-to=""]').hide();

Только не пойму где тут?
avatar
17
data-to="тут блок"
avatar
18
А как отключить на мобильном анимацию?
avatar
0
19
Предоставляю вам скрипт с отключенной анимацией на мобильных устройствах: https://ukit.top/file-script/offmobile.txt
avatar
20
Теперь анимация вообще не работает.
avatar
0
21
Заменил код в файле, который ранее скидывал. Проверьте, пожалуйста.
avatar
22
Ок, работает. Спасибо! Только в коде вместо русских слов теперь не понятно что.
avatar
0
23
Эльфийский smile
avatar
24
Проверила на нескольких шаблонах: анимация работает только в том случае, если цифры жирные (нежирные не анимируются) Вот как, например на этом шаблоне: http://test-may18.ukit.me/ (3-ий блок главной страницы). Это так и должно быть?
avatar