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

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

реле напряжения DigiTOP здесь

Комментарии: 39

  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 — это тот блок с которого начнется анимация

    • dimadv7

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

    • Сергей

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

    • dimadv7

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

    • Сергей

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

    • dimadv7

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

    • Роман

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

  2. Александр

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

    • dimadv7

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

  3. Serj

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

    • dimadv7

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

    • Ulyanoff

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

    • 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

    • Sergalas

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

    • Андрей

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

  5. Serj

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

    • 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»);
    }
    });
    });

    • dimadv7

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

  8. Ixman

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

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

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

    • 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. Лера

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

    • dimadv7

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

    • Лера

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

    • 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»);
    }
    });
    });

    • Александр

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

  15. Валерий

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

  16. Екатерина

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

  17. Sv9t

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

  18. Алёна

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

  19. Дмитрий

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

    • dimadv7

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

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