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

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

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

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

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

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

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

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

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

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

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

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

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

    $(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. Я сделал чутка по дгугому но суть не меняется при первом и дальнейшем скроле диаграмы персчитываются.

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

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

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

  6. Все нашел только не пойму, мне нужно сделать чтобы шрифт был не жирный а тонкий и как поменять размер, плиз помогите ато я в ЖС не силен, буду очень благодарен вам, что именно нужно написать в 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. Здравствуйте, а можете выложить еще раз, только заключить код в [javsscript][/javascript], а то wp искажает его

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

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

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

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

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

  9. Ну собственно вот, пришлось немного порыться по 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. HTML

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

  11. [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. В статье же написано, как изменять внешний вид диаграмм...

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

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

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

  14. Использую на лендингах очень удобную и простую и использовании библиотеку 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. код окончательный так и не выложил, а ведь обещал. чтобы при прокрутке страницы скрипт вызывался

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

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

    1. Изменить ширину 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. Не уверен, что с этим скриптом это возможно. Лучше поискать какое-то другое решение.

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

 

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