X
Юрий Немец

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

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

На сайте находятся также другие статьи по созданию анимации на лендинге:

Анимацию заполнения блоков можно посмотреть на этой странице:

Посмотреть примерСкачать

Если выбираете или решили сменить хостинг на более надежный, то рекомендую статью:

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

1 HTML структура

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

HTML КОД
1
2
3
4
5
6
7
8
9

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

HTML КОД
1

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

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

CSS КОД
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.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 часть

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

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

HTML КОД
1
2

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

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

Javascript КОД
1
2
3

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

Поясню:

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

Вывод

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

Если не получается установить круговые блоки: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!

Успехов!

С Уважением, Юрий Немец

Категории: jQuery