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

Переглядаючи велику кількість Лендінзі зроблених на заході, на багатьох з них я помітив як виглядає блок зі статистикою. Як зазвичай написані цифри, але в якості інфографіки обрані кола, які заповнюються до певного моменту. Все це відбувається при прокручуванні сторінки. І я вирішив написати статтю як зробити на своєму Лендінзі таку анімацію.

На сайті знаходяться також інші статті по створенню анімації на Лендінзі:

• Оформляємо блок із вигодами
• Анімована шапка для Лендінзі
• Поява частин Лендінзі час прокручування

Відео: Анімація блоку "Схема роботи" на Лендінгем

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

Подивитися прімерСкачать

Повний безкоштовний міні-курс по створенню Лендінзі тут: "Лендінгем за 60 хвилин".

Як встановити дану анімацію на Лендінгем?

1 HTML структура

Код блоку з анімованими колами:

123456789

lt;div class="Row content"gt;lt;div class="Circle-container"gt;lt;h3gt; PSDlt;/h3gt;lt;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"gt; lt;/divgt;lt;/divgt;lt;/divgt;

Всі кола знаходяться в одному загальному класі "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:

Відео: Вивчення CSS / CSS3 | # 10 - Позиціонування блоків в CSS + створення невеликого веб сайту

1

lt;link rel="Stylesheet" href="Css / jquery.circliful.css"gt;

А також дописуємо стилі, щоб поставити в один рядок три кола:

1234567891011121314151617181920212223242526272829303132333435363738394041424344

.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

Підключаємо їх перед закриває тегом:

12

lt;script src="Https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.circliful.min.js"gt; lt;/scriptgt;

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

123

$(function(){$(`.circlestat`).circliful()-})-

поясню:

• circlestat - це клас блоку з колом і великою кількістю атрибутів.

висновок

Зараз Ви на своїй продає або підписаний сторінці можете створити анімацію заповнення кругових блоків. Найчастіше це використовується щоб продемонструвати статистику а, можливо, Ви знайдете даному ефекту нове застосування.

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

Успіхів!