Добавляем на сайт радиальные графики. Делаем их анимированными при просмотре.
Круговые графики
Подключаем стиль
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/jquery.circliful.css" type="text/css" media="screen" /> либо wp_enqueue_style( 'circliful', get_template_directory_uri() . '/jquery.circliful.css' , array( ), '1.0' , 'screen' );
Подключаем скрипт
<script type="text/javascript" src="https://opttour.ru/wp-content/themes/tester/js/jquery.circliful.min.js"></script> либо wp_enqueue_script( 'circliful', get_template_directory_uri() . '/js/jquery.circliful.js' , array( ), '1.0' , false );
Скрипты и стили я взял здесь.
Верстка и инициализация круговых графиков
Прописывать параметры графика можно двумя способами: в скрипте, либо в самой верстке графика.
Параметры при инициализации скрипта
В любом случае нам нужно дополнительно вызывать исполнение скрипта
$( document ).ready(function() {
$("#test-circle").circliful();
});
Но при этом также можно указать параметры графика
$( document ).ready(function() {
$("#test-circle").circliful({
animationStep: 5,
foregroundBorderWidth: 5,
backgroundBorderWidth: 15,
halfCircle: 1,
animateInView: 1,
percent: 75
});
});
И в этом случае, нам необходимо где-то вывести сам div id=»test-circle»
Параметры при верстке
Параметры графика можно прописывать в самом div с добавлением приставки data-
<div id="myStat4" data-startdegree="180" data-dimension="250" data-text="35%" data-info="New Clients" data-width="100" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee"></div>
Но в любом случае данный div необходимо инициировать с помощью скрипта .circliful()
data-startdegree — начальная точка на круге (0 — 12 часов)
data-dimension — диаметр графика
data-text — текст внутри графика
data-info — поясняющий текст к графику
Параметры circliful
Первым прописано значение по умолчанию.
animation — анимировать график (1, 0)
animateInView — запускать анимацию графика при появлении на экране (0, 1)
animationStep — скорость анимации, чем меньше — тем медленнее (5, 100)
Иконки FontAwesome
В графики можно добавлять иконки библиотеки FontAwesome (это заложенная возможность). Для этого прописываем параметры иконки
icon: 'f013', — код иконки
iconSize: '20', — размер
iconPosition: 'middle', — положение внутри графика (top, bottom, left, right or middle)
Анимация графика, при появлении на экране
Будем использовать возможности функционала viewportChecker
Для работы скрипта элементам с графиком надо добавлять класс circlegraf
Скрипт
$(document).ready(function(){
jQuery('.circlegraf').viewportChecker({
offset: 200,
callbackFunction: function(elem, action){
$('.circlegraf').circliful();
}
});
});
Пример
<script>
$( document ).ready(function() {
$("#test-circle").circliful({
animation: 1,
animationStep: 1,
foregroundBorderWidth: 15,
backgroundBorderWidth: 15,
percent: 38,
textSize: 28,
textStyle: 'font-size: 12px;',
textColor: '#666',
multiPercentage: 1,
animateInView: 1,
percentages: [10, 20, 30]
});
});
</script>
Решение по набиранию цифр на чистом jQuery.
[site-socialshare]