Лого SiteHere.ru

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

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

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

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

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

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

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

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

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

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

Javascript часть

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

Подключаем их перед закрывающим тегом </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 консультацию!

Успехов!

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

12 комментариев к записи
  • Константин Кирилюк

    Юрий, здравствуйте. Сегодня присоединился к вашей группе на Subscribe и мне на глаза попался анонс вашей статьи. Люблю такие штуки. Так что решил изучить, опробовать и отписаться в комментариях со своими «заметками на полях» и несколькими вопросами.

    1. HTML + CSS + JavaScript

    Жаль, что подобные решения не объодятся без достаточно больших CSS и JavaScript файлов. Это же получается как минимум три дополнительных файла?

    jquery.circliful.css

    jquery.min.js

    jquery.circliful.min.js

    Особенно огорчает то, что на чистом CSS это не получилось реализовать.

    2. Замок на кнопке «Скачать»

    Немного не по теме статьи, но «замочек» на кнопке «Скачать» выглядит так, как буд то «скачать нельзя» или доступно только для зарегистрированных пользователей. Фишка с отчётом времени – выглядит круто. Но всё же допереть, что скачать архив можно, не просто.

    3. Валидная и многофункциональная настройка

    Очень понравилось то, что у решения имеется достаточно много настроек, при чём вполне себе валидных за счёт использования data-атрибутов. Это реально круто!

    4. Эффект, который смотрится эффектно

    Несмотря на то, что подобные эффекты использовать на сайтах не стоит, на лендингов – это самое то! Очень привлекательно и наглядно для различных показателей.

    Пы. Сы. Юрий, реально, спасибо за статью. Обязательно порекомендую к прочтению своим читателям.

     
    • Юрий

      Здравствуйте, Константин!

      Отвечу также по пунктам:

      1. Вы практически указали причину в 3-м пункте, потому что благодаря тому, что это JS плагин, у него много настроек.

      2. На самом деле в правильном месте можно применить и на сайте, но всё же данный эффект подходит больше для лендингов.

       
  • Егор

    Здравствуй, Юрий. Ну да, сейчас круговая анимация блоков для лендинга применяется очень часто. Можно что-нибудь придумать кроме статистики.

     
  • Сергей

    Установил все понравилось, но пока я доскроливаю до блока со статистикой, анимации уже не видно, как сделать так, что бы круги начинали заполняться только в тот момент, когда пользователь доскролил до этого блока?

     
    • Юрий

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

      $(window).scrollTop();

      Использование данного метода смотрите в данном примере: красивые эффекты на продающую страницу.

       
      • Виталий

        Здравствуйте!

        Можно по подробнее сделать урок о 

        $(window).scrollTop();

        появлении анимации в нужном месте

         
        • Юрий Немец

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

           
  • Владимир

    Здравствуйте!

    Очень интересный блок с кругами. Спасибо Вам!

    Меня тоже интересует как сделать что бы анимация начиналась в тот момент когда к ней до скролил, подскажите в какой файл вставлять $(window).scrollTop();

    Заранее благодарен!

     
  • Ольга

    Здравствуйте, Юрий! Будьте любезны, подскажите как можно поменять ширину линии самого круга, чтобы она была равной ширине обводки, это нужно в самом Js править, или можно как-то внешне. Заранее спасибо Вам  за ответ!

     
    • Юрий Немец

      Здравствуйте, Ольга. Внимательно читайте первый пункт статьи, там написано в каком свойстве необходимо менять.

       
  • Дмитрий

    Юрий, подскажите пожалуйста, как сделать полукруг, вместо круга, но при это всё должно работать? Спасибо!)

     
    • Юрий Немец

      Добрый день, Дмитрий!

      Это можно сделать на CSS, с помощью анимации. Сделать круг, а внутри будет 2 div блока. У круга overflow:hidden, а для одного из внутренних блоков будет анимация поворота.

      Но это как один из вариантов, но решений может быть много.

       

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *