Формы это неплохой способ добавить некую изюминку элементам на вашей веб странице. Круги особенно хороши в этом отношении, потому что они целостны, просты и похожи на пирог. А теперь серьёзно, кто не любит пироги?
Демо – Исходный код
Как вы, должно быть, заметили по собственному многолетнему опыту пользования интернетом, большинство элементов на веб страницах, по сути, являются либо квадратами, либо, прямоугольниками. Поэтому, в некоторых случаях, интересные элементы, такие как круги и треугольники в вашем дизайне могут быть весьма полезными. Этот туториал продемонстрирует, как построить анимированную круговую диаграмму, подобную тем, которые вы обычно видите на сайтах портфолио. Это может помочь визуально подчеркнуть ваши навыки, а также продемонстрировать то, с какими задачами вы можете справиться. Взгляните на демо, чтобы увидеть конечный результат.
При написании этого туториала, я буду работать с Circliful. Это бесплатный jQuery плагин с открытыми исходниками. Вы можете загрузить основной файл с Github. Он включает .js файл вместе с соответствующей CSS таблицей стилей. Страница должна содержать и то и другое, чтобы добиться эффекта круга.
Моя страница содержит подобную таблицу стилей styles.css для моих личных CSS стилей. Вам также необходимо сделать копию библиотеки jQuery. Она необходима для того, чтобы плагин корректно работал.
Саму по себе, страницу довольно легко структурировать. Элементы круга содержатся в тэгах div, которые используют атрибуты HTML5 для управления данными. В качестве альтернативы, они могут храниться в функции jQuery, но если вы хотите лучше контролировать каждый элемент, тогда проще работать в HTML.
Это копия первого ряда кругов, состоящего из 3 анимированных единиц. Все эти атрибуты данных в дальнейшем разъяснены в документации к плагину. Каждый представляет опцию, которая определяет анимационный эффект. Ниже привожу краткое описание опций, которые я использую:
Я не настаиваю на том, чтобы вы напрямую редактировали jquery.circliful.css, конечно если вы не желаете кастомизировать плагин. Большая часть цветов может быть изменена прямо из атрибутов данных HTML5, и если вы действительно хотите переписать какие-либо из стилей Circliful, я бы рекомендовал вам делать это в своей собственной таблице стилей.
Сказав вам это, я создал свою собственную таблицу стилей для данного проекта, а не для того, чтобы переписывать стили Circliful. Сама по себе веб страница нуждается в компоновке по умолчанию, которую действительно легко спроектировать. Контентная область отцентрирована в маленькой секции для круговой диаграммы. Каждая область свободно перемещается в контейнере строки в пределах оригинального #stats div.
Внутри каждой секции, контент удерживается в пределах .wrap div для фиксации в центре. Также, свободно передвигающимся элементам круга необходим дополнительный контейнер .clearfix, для того чтобы всё оставалось правильно выровненным.
Этот класс clearfix был известен годами как решение для контейнера со свободно двигающимися элементами. Обычно их удаляют из текста документа и не сохраняют значение их оригинальной ширины/высоты. Но это поддерживает постоянную ширину контейнера #stats и оставляет место для большего количества контента, который будет располагаться ниже на странице.
Так, мы замесили тесто, заполнили противень для пирога, поместили его в духовку и уже практически готовы снять пробу. Если всё выглядит достаточно хорошо, то каков же будет финальный шаг? Нам нужно немного jQuery кода в качестве украшения этого проекта.
Откройте новый скрипт тэг внизу этой HTML страницы. Он будет содержать небольшой отрывок JavaScript. Так как я использовал все атрибуты данных HTML5, нам не нужно вызывать никаких jQuery опций. Скрипт просто должен запустить функцию Circliful на каждом круге divs. Используя продублированное название класса, как например, .circlestat делает процесс очень простым.
Для тех, кто не знаком с синтаксической структурой jQuery, я предоставлю короткое описание. После того, как документ загрузится, мы запускаем новую функцию. Нашей внутренней целью является каждый элемент, который использует класс .circlestat и запускает функцию circliful(). Это приводит плагин Circliful, который создаёт анимационные эффекты, в действие и применяет дополнительный контент/цвета.
Я не могу сказать, что эти круги всегда будут наилучшим решением. Я видел много портфолио, которые были основаны на словах и цифрах, но не на работе как таковой. Подумайте об использовании этих кругов в редких случаях и попробуйте позаимствовать их для других целей, вне простых навыков. Ваши статистические данные не обязательно должны измеряться в процентах – они могут показывать, сколько лет вы находитесь в бизнесе, общее количество ваших проектов или другие подобные цифры. Вы можете бесплатно загружать копию моего руководства и экспериментировать с кодом для того, чтобы он лучше подходил для ваших проектов.
Демо – Исходный код
Как вы, должно быть, заметили по собственному многолетнему опыту пользования интернетом, большинство элементов на веб страницах, по сути, являются либо квадратами, либо, прямоугольниками. Поэтому, в некоторых случаях, интересные элементы, такие как круги и треугольники в вашем дизайне могут быть весьма полезными. Этот туториал продемонстрирует, как построить анимированную круговую диаграмму, подобную тем, которые вы обычно видите на сайтах портфолио. Это может помочь визуально подчеркнуть ваши навыки, а также продемонстрировать то, с какими задачами вы можете справиться. Взгляните на демо, чтобы увидеть конечный результат.
Итак, начнём!
При написании этого туториала, я буду работать с 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.8em;
line-height: 1.35em;
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.25em;
line-height: 1.4em;
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, который создаёт анимационные эффекты, в действие и применяет дополнительный контент/цвета.
Я не могу сказать, что эти круги всегда будут наилучшим решением. Я видел много портфолио, которые были основаны на словах и цифрах, но не на работе как таковой. Подумайте об использовании этих кругов в редких случаях и попробуйте позаимствовать их для других целей, вне простых навыков. Ваши статистические данные не обязательно должны измеряться в процентах – они могут показывать, сколько лет вы находитесь в бизнесе, общее количество ваших проектов или другие подобные цифры. Вы можете бесплатно загружать копию моего руководства и экспериментировать с кодом для того, чтобы он лучше подходил для ваших проектов.
