20.09.15, 21:50
0 комментарий
  Уроки

Круговая анимация блоков для лендинга

Просматривая большое количество лендингов сделанных на западе, на многих из них я заметил как выглядит блок со статистикой. Как обычно написаны цифры, но в качестве инфографики выбраны круги, которые заполняются до определенного момента. Всё это происходит при прокрутке страницы. И я решил написать статью как сделать на своем лендинге такую анимацию.

Как установить данную анимацию на лендинг?

1 HTML структура

Код блока с анимированными кругами:

<div class="row content">
    <div class="circle-container">
        <h3>PSD</h3>
        <div class="circlestat" data-dimension="200" data-text="90%" data-width="30" data-fontsize="38" data-percent="90" data-fgcolor="#61a9dc" data-bgcolor="#eee" data-fill="#ddd"></div>
    </div>
 
    <!-- Еще круги -->
 
</div>


Все круги находятся в одном общем классе "row". А каждый отдельный круг лежит еще в блоке с классом "circle-container"

Сам круг находится в строке 4. Сейчас перейдем непосредственно к настройкам самого круга, потому что их здесь достаточно:

class — с помощью значения данного атрибута будет "привязываться" функционал.
data-dimension — диаметр круга.
data-text — текст внутри круга.
data-width — толщина обводки круга.
data-fontsize — размер текста внутри круга.
data-percent — процент заполнения круга.
data-fgcolor — цвет обводки.
data-bgcolor — цвет фонового круга.
data-fill — цвет заливки круга.


2 Стили CSS

Подключаем файл стилей jquery.circliful.css:

<link rel="stylesheet" href="css/jquery.circliful.css">


А также дописываем стили, чтобы поставить в одну строку три круга:

.content {
   width: 90%;
   max-width: 1140px;
   margin: 0 auto;
}
 
.content:after {
   content: "";
   display: table;
   clear: both;
}
 
#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-bottom: 45px;
   width:33.333%;
}
 
.circle-container h3 {
   display: block;
   text-align: center;
   font-size: 2.25em;
   line-height: 1.4em;
   color: #363636;
   text-shadow: 1px 1px 0 #fff;
}
 
.circlestat {
   margin: 0 auto;
}


3 JS часть

Необходимые библиотеки:



Подключаем их перед закрывающим тегом :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.circliful.min.js"></script>


После того как подключили две библиотеки ниже вставляем между тегами следующий код:

$(function(){
    $('.circlestat').circliful();
});


Поясню:

circlestat — это класс блока с кругом и большим количеством атрибутов.


Ну вот и все!

Автор урока: Юрий Немец

ДЕМО

Посмотреть
пример

СКАЧАТЬ

Вес файла
6.07 Kb

Напишите своё мнение