Побудова анімованої кругової діаграми на jQuery

Форми це непоганий спосіб додати якусь родзинку елементів на веб сторінці. Круги особливо хороші в цьому відношенні, тому що вони цілісні, прості і схожі на пиріг. А тепер серйозно, хто не любить пироги?



ДемоВихідний код

Як ви, мабуть, помітили за власним багаторічному досвіду користування інтернетом, більшість елементів на веб-сторінках, по суті, є або квадратами або прямокутниками. Тому, в деяких випадках, цікаві елементи, такі як круги і трикутники в вашому дизайні можуть бути вельми корисними. Цей туторіал продемонструє, як побудувати анімовану кругову діаграму, подібну до тих, які ви зазвичай бачите на сайтах портфоліо. Це може допомогти візуально підкреслити ваші навички, а також продемонструвати те, з якими завданнями ви можете впоратися. Погляньте на демо, щоб побачити кінцевий результат.

Отже, почнемо!
При написанні цього туториала, я буду працювати з Circliful. Це безкоштовний jQuery плагін з відкритими вихідними кодами. Ви можете завантажити основний файл з Github. Він включає .js файл разом з відповідною таблицею стилів CSS. Сторінка повинна містити і те й інше, щоб досягти ефекту кола.

<pre lang="PHP" line="1"><!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
< meta http-equiv="Content-Type" content="text/html">
<title>Animated Circle Stats - Template Monster Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<link rel="stylesheet" type="text/css" media="all" href="css/jquery.circliful.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.circliful.min.js"></script>
</head>
</pre>


Моя сторінка містить подібну таблицю стилів styles.css для моїх особистих CSS стилів. Вам також необхідно зробити копію бібліотеки jQuery. Вона необхідна для того, щоб плагін коректно працював.
Саму по собі, сторінку досить легко структурувати. Елементи кола містяться в тегах div, які використовують атрибути HTML5 для управління даними. В якості альтернативи, вони можуть зберігатися в функції jQuery, але якщо ви хочете краще контролювати кожен елемент, тоді простіше працювати в HTML.

<pre lang="PHP" line="1"><div id="stats" class="clearfix">
<div class="wrap">
<div class="row">
<div class="circle-container">
<h3>Photoshop</h3>
<div class="circlestat" data-dimension="200" data-text="55%" data-width="30" data-fontsize="38" data-percent="55" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
<div class="circle-container">
<h3>Illustrator</h3>
<div class="circlestat" data-dimension="200" data-text="75%" data-width="30" data-fontsize="38" data-percent="75" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
<div class="circle-container">
<h3>After Effects</h3>
<div class="circlestat" data-dimension="200" data-text="35%" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
</div><!-- @end .row -->
</pre>


Це копія першого ряду кіл, що складається з 3 анімованих одиниць. Всі ці атрибути даних в подальшому роз'яснені в документації до плагіну. Кожен представляє опцію, яка визначає анімаційний ефект. Нижче наводжу короткий опис опцій, які я використовую:

  • data-dimension — загальний розмір кола ширина/висота;
  • data-text — текст, який з'являється в центрі кожного кола;
  • data-width — товщина, що обертається дуги даних;
  • data-fontsize — розмір шрифту тексту по центру;
  • data-percent — число від 0-100 відображає відсотки у вашому колі;
  • data-fgcolor — колір переднього плану кола;
  • data-bgcolor — колір фону кола;
  • data-fill — внутрішня заливка кольору фону внутрішнього кола.


Компонування CSS сторінки
Я не наполягаю на тому, щоб ви безпосередньо редагували jquery.circliful.css, звичайно якщо ви не бажаєте кастомизировать плагін. Велика частина квітів може бути змінена прямо з атрибутів даних HTML5, і якщо ви дійсно хочете переписати будь-який із стилів Circliful, я б рекомендував вам робити це у своїй власній таблиці стилів.
Сказавши вам це, я створив свою власну таблицю стилів для даного проекту, а не для того, щоб переписувати стилі Circliful. Сама по собі веб сторінка потребує компонуванні за замовчуванням, яку дійсно легко спроектувати. Контентна область відцентрована в маленькій секції для кругової діаграми. Кожна область вільно переміщається в контейнері рядка в межах оригінального #stats div.

<pre lang="PHP" line="1">/** page structure **/
.wrap {
display: block;
margin: 0 auto;
max-width: 800px;
}
#intro {
display: block;
margin-bottom: 25px;
text-align: center;
}
#intro p {
font-size: 1.8 em;
line-height: 1.35 em;
color: #616161;
font-style: italic;
margin-bottom: 25px;
}
#stats {
display: block;
width: 100%;
padding: 15px 0;
background: #f8f8f8;
border-top: 4px solid #c3c3c3;
border-bottom: 4px solid #c3c3c3;
}
#stats .row {
display: block;
}
.circle-container {
display: block;
float: left;
margin-right: 55px;
margin-bottom: 45px;
}
.circle-container h3 {
display: block;
text-align: center;
font-size: 2.25 em;
line-height: 1.4 em;
color: #363636;
text-shadow: 1px 1px 0 #fff;
}
</pre>


Усередині кожної секції, контент утримується в межах .wrap div для фіксації в центрі. Також, вільно пересуваються елементів кола необхідний додатковий контейнер .clearfix, для того щоб все залишалося правильно вирівняно.

<pre lang="PHP" line="1">/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }

html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
</pre>


Цей клас clearfix відомий роками як рішення для контейнера з вільно рухомими елементами. Зазвичай їх видаляють з тексту документа і не зберігають значення їх оригінальної ширини/висоти. Але це підтримує постійну ширину контейнера #stats і залишає місце для більшої кількості контенту, який буде розташовуватися нижче на сторінці.

Заключні штрихи
Так, ми замісили тісто, заповнили форму для пирога, помістили його в духовку і вже практично готові зняти пробу. Якщо все виглядає досить добре, то який же буде фінальний крок? Нам потрібно трохи jQuery коду в якості прикраси цього проекту.
Відкрийте новий скрипт тег внизу цієї сторінки HTML. Він буде містити невеликий уривок JavaScript. Так як я використав всі атрибути даних HTML5, нам не потрібно викликати ніяких jQuery опцій. Скрипт просто повинен запустити функцію Circliful на кожному колі divs. Використовуючи продублированное назва класу, як наприклад, .circlestat робить процес дуже простим.

<pre lang="PHP" line="1">$(function(){
$('.circlestat').circliful();
});
</pre>


Для тих, хто не знайомий з синтаксичною структурою jQuery, я надам короткий опис. Після того, як документ завантажиться, ми запускаємо нову функцію. Нашої метою є кожен елемент, який використовує клас .circlestat і запускає функцію circliful(). Це призводить плагін Circliful, який створює анімаційні ефекти, дія і застосовує додатковий контент кольору.

Я не можу сказати, що ці кола завжди будуть найкращим рішенням. Я бачив багато портфоліо, які були засновані на словах та в цифрах, але не на роботі як такої. Подумайте про використання цих кіл в рідкісних випадках і спробуйте запозичити їх для інших цілей, поза простих навичок. Ваші статистичні дані не обов'язково повинні вимірюватися у відсотках — вони можуть показувати, скільки років ви знаходитесь в бізнесі, загальна кількість ваших проектів або інші подібні цифри. Ви можете безкоштовно завантажувати копію мого керівництва і експериментувати з кодом для того, щоб він краще підходить для ваших проектів.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.