Це не єдиний спосіб, що дозволяє зробити Ваш Лендінгем або сайт особливим. Нижче представлені кілька цікавих ефектів, які можна з легкістю застосувати і для своїх проектів:
Всі 3 приклади анімованих графіків можна подивитися нижче:
Як використовувати красиві графіки в своїх цілях?
Відразу хочу сказати, що дані графіки є ще і адаптивними. Адже зараз це важливо, тому що користувачів, які заходять на сайт з мобільних пристроїв, стає з кожною годиною все більше.
Створюються такі красиві графіки з допомогою бібліотеки - Chartist.js.
А з застосуванням CSS3 анімації вони "оживають" і притягують увагу. Тепер уявіть реакцію відвідувачів побачивши такого на звичайному Лендінзі! Адже анімацією при прокручуванні вже нікого не здивуєш, а ось подібні елементи завжди будуть підвищувати якість сайту.
Для початку пройдемося по кроках, які допоможуть Вам підключити дану бібліотеку, потім я покажу кілька прикладів і розповім про всі функції даної бібліотеки. Але відразу попереджаю, абсолютно всі функції розглянути в одній статті просто неможливо.
1 етап. Підключаємо необхідні стилі і скрипти
Файли стилів і скриптів можна скачати і розмістити на своєму хостингу, але набагато зручніше просто вставити 2 рядки в HTML і підключити всі, що потрібно:
Пройдемося по кожному рядку, щоб у Вас було повне розуміння цього невеликого JS-скрипта. А якщо Ви будете розуміти, за що відповідає кожен рядок, то зможете змінити під себе будь-які значення.
- Рядок 1 - в цьому рядку зверніть увагу на значення між одинарними лапками. Тут вказується селектор блоку, в якому у нас буде знаходиться графік або діаграма.
- Рядок 2 - через кому в одинарних лапках прописуємо назви одного поділу по осі X.
- Рядки з 3 по 6 - тут задаються значення по осі Y для кожної лінії на графіку. Один рядок значень в квадратних дужках (в цьому скрипті 4-я і 5-я рядки) відповідає одній лінії.
- Рядок 8 - вказавши значення true. ми розтягнули графік на всю ширину "блоку-батька".
- Рядки з 9 по 11 - задаємо внутрішній відступ справа. Це робиться для того, щоб опис поділів по осі X не обрізають і містилося в один блок.
Якщо Ви зробите все кроки, зазначені вище, то отримаєте вже красивий графік. Залишиться лише вписати необхідні значення. Але цей графік нічим не відрізняється від усіх інших, які можна побачити в інтернеті. Дивіться нижче, яким чином можна надати унікальність цього графіку, після чого він стане притягувати увагу.
Приклад 1. Анімований графік
Але як же створити такий графік, як на зображенні вище (зображення анімоване, якщо у Вас немає анімації, то почекайте, поки завантажиться) вище?
Для цього необхідно лише дописати деякі властивості елементів на готовому графіку. Так як весь графік складається з SVG елементів, то нам лише необхідно вирішити який з них ми хочемо анімувати.
Щоб анімувати дві лінії, як я це зробив в цьому прикладі, потрібно додати наступний CSS код в Ваш файл стилів:
Цими прикладами я хотів показати, що створити гарний і, головне, що виділяється графік дійсно просто. Достатньо лише знати хоча б основи CSS3 анімації. Про це можна почитати за посиланням нижче.
Вивчіть уважно цю статтю, і тоді зможете створити будь-яку анімацію на CSS3: CSS3 анімація для самих маленьких.
В даний час недостатньо просто зробити Лендінгем або просто зробити сайт. Це вже не працює. Зараз час, коли необхідно кожен елемент, кожен блок на сайті опрацьовувати і робити максимально унікальним, не забуваючи при цьому про основне дизайні сайту.
Але, що найбільше радує, так це кількість можливостей, які зараз є. У статті Ви познайомилися лише з однією з безлічі бібліотек, за допомогою яких можна робити звичайні елементи нестандартними. Залишилося скористатися цим правильно!
Для цього ви можете використовувати CSS. Щоб побудувати коло, буде досить, але щоб малювати криві, рекомендую розібратися в SVG. Тому що за допомогою даної технології можна створювати інтерактивні карти будь-якої складності.
Ось приклад з картойУкаіни: інтерактивна картаУкаіни.