Progresscircle

HIT

23.11.2015

1364

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

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

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

<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

Пример

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

Поделится информацией с друзьями

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

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

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

Progresscircle
Сортировка постов (по дате, по заголовку, по дате изменений)
Рекомендации для васСортировка постов (по дате, по заголовку, по дате изменений)Opttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.