Март 1, 2020 Запись была обновлена
Круговая анимация блоков для лендинга
Просматривая большое количество лендингов сделанных на западе, на многих из них я заметил как выглядит блок со статистикой. Как обычно написаны цифры, но в качестве инфографики выбраны круги, которые заполняются до определенного момента. Всё это происходит при прокрутке страницы. И я решил написать статью как сделать на своем лендинге такую анимацию.
На сайте находятся также другие статьи по созданию анимации на лендинге:
Анимацию заполнения блоков можно посмотреть на этой странице:
Посмотреть примерСкачать
Если выбираете или решили сменить хостинг на более надежный, то рекомендую статью:
Как установить данную анимацию на лендинг?
1 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:
1 | <link rel="stylesheet" href="css/jquery.circliful.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 часть
Необходимые библиотеки:
- jQuery.min.js
- jquery.circliful.min.js
Подключаем их перед закрывающим тегом </body>:
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> следующий код:
1 2 3 | $(function(){ $('.circlestat').circliful(); }); |
Поясню:
- circlestat — это класс блока с кругом и большим количеством атрибутов.
Вывод
Сейчас и Вы на своей продающей или подписной странице можете создать анимацию заполнения круговых блоков. Чаще всего это используется чтобы продемонстрировать статистику, но, возможно, Вы найдете данному эффекту новое применение.
Если не получается установить круговые блоки: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!
Успехов!
С Уважением, Юрий Немец
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Юрий, здравствуйте. Сегодня присоединился к вашей группе на 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();
Заранее благодарен!
Здравствуйте, Юрий! Будьте любезны, подскажите как можно поменять ширину линии самого круга, чтобы она была равной ширине обводки, это нужно в самом Js править, или можно как-то внешне. Заранее спасибо Вам за ответ!
Здравствуйте, Ольга. Внимательно читайте первый пункт статьи, там написано в каком свойстве необходимо менять.
Юрий, подскажите пожалуйста, как сделать полукруг, вместо круга, но при это всё должно работать? Спасибо!)
Добрый день, Дмитрий!
Это можно сделать на CSS, с помощью анимации. Сделать круг, а внутри будет 2 div блока. У круга overflow:hidden, а для одного из внутренних блоков будет анимация поворота.
Но это как один из вариантов, но решений может быть много.