Jquery knob | анимация чисел с прогресс-баром

jquery knobВсем - привет, друзья! Сегодня не совсем обычный пост.

У меня будет сразу несколько просьб и обращений к вам по ходу статьи. Напишите пожалуйста ответы в комментариях. Сегодня будем делать вот такие прикольные штуки:

анимация чисел с заполнением шкалы

Будет происходить анимация чисел с плавным заполнением шкалы. Думаю, многие найдут применение данному эффекту, так как в последнее время он очень популярен. (70 выполненных работ, 40 довольных клиентов и т.д. )

  1. В связи с этим первый вопрос к вам: "Как бы вы искали данный эффект в поисковых системах? То есть по какому запросу? Может быть есть конкретное название?" Как по мне - это круговая диаграмма. Но в контексте лендинг пейдж, люди совсем по-другому называют этот элемент. Просто, я стараюсь оптимизировать статьи, и хотелось бы это сделать под наиболее популярный запрос.

Анимация чисел с заполнением шкалы

Для реализации данного эффекта нам понадобиться подключить библиотеку Jquery и Jquery knob.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="js/jquery.knob.min.js"></script>

Скачать ее можно с github или взять из моего исходника в конце статьи.

Теперь нужно создать обычное поля для ввода, например, так:

<input type="text" value="25" class="dial">

Класс может быть любым. На данному этапе у вас должно получиться поле со значением 25.

Для того, чтобы преобразовать его в круг, воспользуйтесь следующим скриптом:

<script>
    $(function() {
        $(".dial").knob();
    });
</script>

Теперь, у вас получился круг со значением 25. Вы можете управлять значением, наведя курсор на круг и вращая колесиком мыши.

Конечно, вам скорее всего, данный эффект для лендинга - не нужен. Давайте сразу отключим его и разберемся с другими настройками, влияющими на внешний вид и поведение формы.

Data атрибуты, влияющие на внешний вид

Все настройки можно задавать несколькими способами. Давайте воспользуемся наиболее понятным для новичков! Будем дописывать data атрибуты.

Для того, чтобы отключить прокрутку значения в круге, нужно дописать следующую строку:

data-readOnly="true"

Должно получиться так:

<input type="text" value="25" class="dial" data-readOnly="true">

Думаю, с этим понятно. Давайте продолжим. Существует еще целый набор параметров, которые можно изменить. Вот основные из них:

  • data-angleOffset - задает угол, с которого будет начинаться отсчет (по умолчанию - 0):
    <input type="text" value="25" class="dial" data-readOnly="true" data-angleOffset="45" >
  • data-angleArc - длина дуги. В комбинации с предыдущим эффектом можно сделать так:
    <input type="text" value="70" class="dial" data-angleOffset="-90"  data-angleArc="180">
  • data-linecap - скругление конца заливки
    <input type="text" value="30" class="dial" data-linecap="round">

библиотека jQuery Knob

Неплохо! Продолжаем...

  • data-thickness - ширина рамки круга, которою заполняем цветом (в процентах, но без указания символа "%" )
    <input type="text" value="25" class="dial" data-readOnly="true" data-thickness="0.05" >
  • data-fgColor - цвет заливки
    <input type="text" value="70" class="dial" data-angleOffset="-90"  data-angleArc="180" data-fgColor="#ffec03">
  • data-bgColor - цвет рамки круга
    <input type="text" value="30" class="dial" data-skin="tron" data-bgColor="#b9ffc9">

Параметры jquery knob
Есть еще несколько очень важных параметров. Я не буду приводить скриншот того, как они работают, а просто перечислю.

  • data-font  - тип шрифта.
  • data-fontWeight  - жирность шрифта.
  • data-width - размер круга.

Есть и другие параметры, которые можно регулировать. Вы можете ознакомиться с ними на страничке github, о которой я говорил ранее.

Теперь, давайте перейдем к анимации данного эффекта. Для этого нам понадобится воспользоваться следующим скриптом, который можно расположить в конце страницы или вынести во внешний файл.

<script>
  $(".dial").knob();
  $({animatedVal: 0}).animate({animatedVal: 70}, {
    duration: 2000,
    easing: "swing",
  step: function() {
    $(".dial").val(Math.ceil(this.animatedVal)).trigger("change");
  }
  });
</script>

Так придется делать столько раз, сколько imput(ов) вы задали. Причем, для того, чтобы задать разное значение, придется создавать поля с разными классами. Например, dial1 и dial2 и не забыть изменить их в скрипте в этих строках:

   $(".dial1").knob();
   $(".dial1").val(Math.ceil(this.animatedVal)).trigger("change");

Собственно говоря, здесь то и возникают вопросы. Не мог бы кто-нибудь помочь мне сделать так, чтобы анимация воспроизводилась не при загрузке страницы, а только в том случае, когда пользователь докрутил до нее. Моих скудных знаний javascript не хватило. Если, при добавлении анимации при прокрутке нужно было просто добавить определенные классы в нужный момент, то здесь, мне кажется, - что-то сложнее. Может быть я ошибаюсь. В любом случае буду признателен за помощь, кто не полениться и поможет, если конечно, разбирается в этом.

Пока что, использовать данный инструмент рекомендую тем, кто хочет расположить его на первом экране, так как в ином случае, посетитель просто не заметит эффекта анимации.

А на сегодня - все. Всем - пока! О чем вы хотели-бы узнать в будущих статьях блога?

Скачать исходник

Похожие публикации

45 комментариев

  1. Андрей

    Для появляния анимации нужно воспользоваться управлением скролла:
    if($(document).scrollTop()>=$('.block3-cont').scrollTop()+500){
    $(".dial").knob();
    $({animatedVal: 0}).animate({animatedVal: 60}, {
    duration: 2000,
    easing: "swing",
    step: function() {
    $(".dial").val(Math.ceil(this.animatedVal)).trigger("change");
    }
    });

    }

    Где block3-cont - это тот блок с которого начнется анимация

    1. dimadv7

      Привет, спасибо огромное! На днях обновлю статью. Есть сайт? Ссылочку на тебя поставлю, как на автора идеи?

    2. Сергей

      Чет не срабатывает данная конструкция. Блок вообще не отображается. В чем может быть проблема?

    3. dimadv7

      Запусти на сервере, локальном или реальном и будет все в порядке)

    4. Сергей

      Ну не знаю, криво все равно работает. Сделал через jquery.viewportchecker.js теперь все отлично.

    5. dimadv7

      В чем проявляется кривость? с удовольствием поправлю

    6. Роман

      Здравствуйте Сергей,а не могли бы вы поделиться строками кода реализации появления анимации при скроле?

  2. Александр

    Ссылка битая!

    1. dimadv7

      Спасибо, поправил!

  3. Serj

    Доброй ночи, скажите как сделать чтобы внутри круга было написано ( 20% Значение в месяц) ??? и не пойму как поменять размер шрифта, дизайнер хорошо поиздевался над графиком)))

    1. dimadv7

      Нет, данным способом вряд ли получится. Нужно что-то другое искать для процентов.

    2. Ulyanoff

      Размер шрифта: knob.min.js, 717 строчка [ 'font': ... ], а [ % ] можно положить сверху DIV-ом

    3. Alexandr

      Для процентов есть своя функция, я недавно разбирал, если вспомню скину помню что где-то в formatting

  4. Ulyanoff

    Чтобы анимация запускалась в нужный момент:

    $(window).scroll(
    function() {
    var start = $(".block").offset().top-300;
    if ($(this).scrollTop() > start) {
    var currentNumber = $('.dial').val();
    $(".dial").knob();
    $({numberValue: currentNumber}).animate({numberValue: 85}, {
    duration: 2000,
    easing: "linear",
    step: function() {
    $(".dial").val(Math.ceil(this.numberValue)).trigger("change");
    }
    });
    }
    }
    );

    Где:
    .block - собственно, нужный нам блок
    [ - 300 ] - сколько нужно отступить
    значие поля .dial value=0

    1. Sergalas

      Я сделал чутка по дгугому но суть не меняется при первом и дальнейшем скроле диаграмы персчитываются.

    2. Андрей

      Есть 2 замечания:
      1) $(«.dial»).knob(); можно вызывать не при скроле, а при загрузке страницы, потому что это по сути инициализация плагина, и не обязательно ее вызывать постоянно, одного раза достаточно, это экономит ресурсы.
      2) в условие if ($(this).scrollTop() > start) я добавил еще ограничение снизу вот так
      if ((($(this).scrollTop() > start)&($(this).scrollTop() < start+200)))
      поясню для чего: функция вызывается при скролинге, условие нужно для того, чтобы по сути "отсекать" лишний скролинг, В Вашем случае если мы доскролим до наших элементов, подождем пока они отработают, а потом махнем колесом мыши еще раз, то анимация запустится еще раз, что не всегда хорошо выглядит. и к тому же если у нас после этих элементов еще длинная страница, при ее скроллинге, даже если элементы у нас уже не видны, анимация все равно будет отрабатывать и грузить процессор.

  5. Serj

    У меня в Саблайме :ЖС одной строкой идет сплошно??

    1. Alexandr

      Это потому что ты скачал min версию скрипта.
      А минимальная версия используется для уменьшения нагрузки.

  6. Serj

    Все нашел только не пойму, мне нужно сделать чтобы шрифт был не жирный а тонкий и как поменять размер, плиз помогите ато я в ЖС не силен, буду очень благодарен вам, что именно нужно написать в 717 строке?

  7. Денис

    У меня для появления анимации при прокрутке сработал этот скрипт

    scrollStart = 200;
    $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $(".dial").knob();
    $({animatedVal: 0}).animate({animatedVal: 70}, {
    duration: 2000,
    easing: "swing",
    step: function() {
    $(".dial").val(Math.ceil(this.animatedVal)).trigger("change");
    }
    });
    });

    1. dimadv7

      Здравствуйте, а можете выложить еще раз, только заключить код в [javsscript][/javascript], а то wp искажает его

    2. Алиса

      Денис, перепробовала все что сверху не работает, а ваш работает - спасибо огромное что написали ваше решении! благодарю!

  8. Ixman

    А можете подсказать на счёт дополнения для анимации, он режет дробные числа. Пробовал вместо ceil использовать

    $(".dial").val(Math.round(this.animatedVal).toFixed(2)).trigger("change");

    Всё равно выводит именно округлённое целое число, в какую сторону копать?

    1. dimadv7

      Здравствуйте, честно говоря, не в курсе. Я не силен в js. Просто стояла задача однажды сделать такой эффект и я поделился тем, как я его реализовал. Поэтому не могу вам подсказать. Если разберетесь, дайте знать, я обязательно дополню статью.

  9. Ixman

    Ну собственно вот, пришлось немного порыться по javascript справочникам, а особо ценная инфа, как всегда, в комментах. Результат вот
    [javsscript]
    $(document).ready(function() {
    $({animatedVal: 0}).animate({animatedVal: 4.8}, {
    duration: 4000,
    easing: 'linear',
    step: function() {
    $(".dial").val(Math.round(parseFloat(this.animatedVal)*100)/100).trigger("change");
    }
    });
    });[/javascript]

    Да чтобы полоска не рывками по кругу бежала, не забываем при конфигурации knob ставить step = .1

  10. Aleksandr

    HTML

    scroll down
    start
    Скрипт
    [javsscript]
    // [/javsscript]

  11. Aleksandr

    [input type='text' class='dial' value='0' data-number='100' /]
    [div style="height: 300px"]scroll down[/div]
    [ div class="startKnob"]start[/div]

    $(function () {
    $('.dial').knob({
    min: '0',
    max: '100',
    readOnly: true
    });

    });

    startKnob = function() {
    $('.dial'). animate({
    value: $('.dial'). data('number')
    },{
    duration: 950,
    easing: 'swing',
    progress: function () {
    $('.dial'). val(Math.round(this.value)).trigger('change');
    }
    });
    }
    $('.startKnob'). bind('inview', startKnob);
    Пробелы после точек уберите

  12. Лера

    Подскажите, пожалуйста, как сделать, чтобы на странице выводились две разных диаграммы?Буду очень благодарна за помощь, очень надо.

    1. dimadv7

      В статье же написано, как изменять внешний вид диаграмм...

    2. Лера

      Написано, но неведомой мне причине, не работает менять dial, много раз крутила и так, и сяк. Всё равно толку ноль

    3. dimadv7

      Так... ладно. Давайте начнем с того, что вы имеете ввиду, когда говорите, что хотите 2 разные диаграммы? Например, data-thickness - ширина рамки круга, которою заполняем цветом.

  13. Максим

    Добрый день а как сделать так чтобы отсчёт шёл в обратной порядке допустим мне надо чтобы конечной цифрой была единица "1! а отсчёт шёл с -100

  14. Web Alex

    Использую на лендингах очень удобную и простую и использовании библиотеку Waypoints. Когда доходишь до нужной секции или блока делает определенное действие.

    $('.section').waypoint(function(){
    $(".circle").knob();
    $({animatedVal: 0}).animate({animatedVal: 125 }, {
    duration: 5000,
    easing: "swing",
    step: function() {
    $(".circle").val(Math.ceil(this.animatedVal)).trigger("change");
    }
    });
    });

    1. Александр

      Это верно. Очень даже удобно.

  15. Валерий

    Народ. Сори если где-то прошляпил) Дело в том, что размер круга выставил data-width="50", так надо . Он соответственно стал маленьким и цифра в нём. А можно ли сделать цифру больше? её же при ширине круга 50 совсем не видно)

  16. Екатерина

    Спасибо большое,статья очень помогла)

  17. Sv9t

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

  18. Алёна

    Добрый день! Подскажите, пожалуйста, как сделать круг резиновым (чтоб занимал 100% ширины блока, в котором он находится, он тоже в % будет) ??

  19. Дмитрий

    Как изменить радиус этой диаграммы ?

    1. dimadv7

      Изменить ширину div в котором находится диаграмма, скачайте исходник, гляньте как там сделано.

  20. Павел

    Есть 2 замечания:
    1) $(«.dial»).knob(); можно вызывать не при скроле, а при загрузке страницы, потому что это по сути инициализация плагина, и не обязательно ее вызывать постоянно, одного раза достаточно, это экономит ресурсы.
    2) в условие if ($(this).scrollTop() > start) я добавил еще ограничение снизу вот так
    if ((($(this).scrollTop() > start)&($(this).scrollTop() < start+200)))
    поясню для чего: функция вызывается при скролинге, условие нужно для того, чтобы по сути "отсекать" лишний скролинг, В Вашем случае если мы доскролим до наших элементов, подождем пока они отработают, а потом махнем колесом мыши еще раз, то анимация запустится еще раз, что не всегда хорошо выглядит. и к тому же если у нас после этих элементов еще длинная страница, при ее скроллинге, даже если элементы у нас уже не видны, анимация все равно будет отрабатывать и грузить процессор.

    МОЖНО получить готовый скрипт с учетом этих замечаний? В ходе переписки не очень понял как реализовать.

  21. Павел

    у меня сработал вот этот скрипт, но при каждом скролле перезагружает анимацию

    scrollStart = 200;
    $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    $(".dial2").knob();
    $({animatedVal: 0}).animate({animatedVal: 60}, {
    duration: 2000,
    easing: "swing",
    step: function() {
    $(".dial2").val(Math.ceil(this.animatedVal)).trigger("change");
    }
    });
    });

    не есть хорошо

    1. Павел

      достаточно чтобы это было 1 раз именно при приближении к этому месту

  22. Вадим

    Скажи пожалуйста а как поставить % после числа внутри круга, что бы понятнее было что выражение в процентах?

    1. dimadv7

      Не уверен, что с этим скриптом это возможно. Лучше поискать какое-то другое решение.

Добавить комментарий

 

© 2014 — 2021, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности