Progresscircle

23.11.2015

890

Добавляем на сайт радиальные графики. Делаем их анимированными при просмотре.

Круговые графики

Подключаем стиль

<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();
     });

Для обобщенных параметров нам необходимо инициировать .circliful на класс, но если нужны индивидуальные параметры, то следует использовать id, но соответственно не дублировать их в верстке (не будут работать)

Но при этом также можно указать параметры графика

$( 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();
}

});

});

Это сложный вариант использования, требующий подключения дополнительного скрипта viewportChecker. При этом при создании нескольких графиков — данный способ работает не корректно. В самом скрипте предусмотрена эта возможность — параметр animateInView

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Progresscircle
Фильтр. Принцип работы
Рекомендации для васФильтр. Принцип работыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.