Инфографика в портфолио, блоге

tsumbaluk.in.ua 5 Октябрь 2016

На сегодняшний день практически не один веб проект не обходиться без инфографики будь то портволио, блог или корпоративный сайт.Для реализации етой задачи для front-end разработчика на данный момент существует огромное множество javascript библиотек и jquery плагинов я остановился на jquery-circle-progress из ряда причин.

  • Полностю удовлетворяет потребности
  • Размер 14кб и ето не сжатая версия
  • Кастомизация анимируемых окружностей

Итак найти этот плагин можно вот здесь. Там есть вся документация но мы рассмотри базовое использование.

HTML разметка

<script src="jquery-circle-progress/dist/circle-progress.js"></script>
<div 
    class="first-sirkl"
    data-value="0.65" 
    data-size="210" 
    data-thickness="4"> 
    <strong></strong> 
</div>
  • data-value — соответствует заполняемости окружности допустимое значение от 0.0 до 1.0
  • data-size — диаметр круга
  • data-thickness — толщина отрисовуемой линии

элемент strong нужен для числа которое будет динамически изменяться от 0 до указанного data-value например это портфолио front-end разработчика тут будет процент знания javascript.

Инициализация плагина

$('.first-sirkl').circleProgress({
    fill: {color:'#1682EF'}
}).on('circle-animation-progress', function(event, progress, stepValue) {
    $(this).find('strong').text(String(stepValue.toFixed (2)).substr(2)+'%');
});

Что здесь происходит, находим наш еллемент и запускаем на нем метод плагина которому в качестве аргумента передаем свойство fill — которое в свою очередь отвечает за цвет заполняемой угружности также стоит упомянуть о свойстве emptyFill — цвет не заполненого круга.
Далее идет функция которая срабатывает на ивент даного плагина в которой в наш тег strong ложиться значение data-value.

Результат

See the Pen Particles.js by Alexander Tsymbaluk (@rodan8888) on CodePen

Новое в блоге

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно

Gulp инструмент для удобной и быстрой front-end разработки!
tsumbaluk.in.ua || 05.10.2016

Gulp инструмент для удобной и быстрой front-end разработки!

Как определить страну и город по IP адресу, javascript?
tsumbaluk.in.ua || 05.10.2016

Как определить страну и город по IP адресу, javascript?

Particles.js что это такое?
tsumbaluk.in.ua || 05.10.2016

Particles.js что это такое?