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">

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

• 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">

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

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

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

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

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