Красиві діаграми для сайту - анімація на діаграмі і графіку

Красиві діаграми для сайту - анімація на діаграмі і графіку

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

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

  • Унікальне оформлення Google Maps
  • Кругова анімація блоків для сайту і Лендінзі
  • Малювання елементів з нуля при прокручуванні Лендінзі

Всі 3 приклади анімованих графіків можна подивитися нижче:

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

Як використовувати красиві графіки в своїх цілях?

alt = "Гарний анімований графік" width = "780" height = "436" class = «alignnone size-full wp-image-7163" / gt;

Але як же створити такий графік, що на зображенні вища (зображення анімоване, якщо у Вас немає анімації, то почекайте, поки завантажиться) вище?

Для цього необхідно лише дописати деякі властивості елементів на готовому графіку. Так як весь графік складається з SVG елементів, то нам лише необхідно вирішити який з них ми хочемо анімувати.

Щоб анімувати дві лінії, як я це зробив в цьому прикладі, потрібно додати наступний CSS код в Ваш файл стилів:

CSS КОД
123456789101112131415161718192021222324252627282930313233343536


/ * Графік # 1 * // * Колір, товщина і стиль першої лінії * /.chart1.ct-chart .ct-series.ct-series-a .ct-line {stroke: # F04D3A-stroke-width: 5px-stroke-dasharray: 5px 5px-animation: dashoffset-seven 200ms infinite linear-}/ * Колір точок першої лінії * /.chart1.ct-chart .ct-series.ct-series-a .ct-point{stroke: # B22819-}/ * Колір, товщина і стиль другої лінії * /.chart1.ct-chart .ct-series.ct-series-b .ct-line {stroke: # 4DB543-stroke-width: 5px-stroke-dasharray: 5px 5px-animation: dashoffset 200ms infinite linear-}/ * Колір точок другої лінії * /.chart1.ct-chart .ct-series.ct-series-b .ct-point{stroke: # 0FB500-}/ * Анімація руху штрихових точок * /@keyframes dashoffset {0% {stroke-dashoffset: 7px-}100% {stroke-dashoffset: 0px-}}

JS частина я тут не пишу, вона дуже схожа в кожному з прикладів. Якщо Ви уважно вивчили опис JS коду вище, де я розібрав все буквально по рядках, то і тут Вам не важко буде розібратися.

Приклад 2. Анімація виділення головної лінії на графіку

width = "650" height = "363" alt = "Анімація виділення лінії" class = «alignnone size-full wp-image-7164" / gt;

Тут (на зображенні вище) присутній анімація. Якщо Ви її не бачите, то, можливо, у Вас просто не завантажилася картинка, просто почекайте.

Це класний спосіб показати зміни і привернути увагу до конкретної лінії на графіку. Все зроблено на CSS3. Був використаний такий код для анімації:

CSS КОД
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
/ * Графік # 2 * // * Колір, товщина і стиль першої лінії * /.chart2.ct-chart .ct-series.ct-series-a .ct-line {stroke:# 949494-stroke-width: 5px-}/ * Колір точки для першої лінії на графіці * /.chart2.ct-chart .ct-series.ct-series-a .ct-point{stroke: # 656565-}/ * Колір, товщина і стиль другої лінії * /.chart2.ct-chart .ct-series.ct-series-b .ct-line {stroke: # 6765B5-stroke-width: 5px-animation: width-pulse 2s infinite-}/ * Колір точки для другої лінії на графіці * /.chart2.ct-chart .ct-series.ct-series-b .ct-point{stroke: # 403CB5-}/ * Колір, товщина і стиль третьої лінії * /.chart2.ct-chart .ct-series.ct-series-c .ct-line {stroke: # 949494-stroke-width: 5px-}/ * Колір точки для третьої лінії на графіку * /.chart2.ct-chart .ct-series.ct-series-c .ct-point{stroke: # 656565-}/ * Анімація пульсації для виділення лінії на графіку * /@keyframes width-pulse {0% {stroke-width: 6px-stroke: # 403CB5-}50% {stroke-width: 14px-stroke: # E40DE4-}100% {stroke-width: 6px-stroke: # 403CB5-}}

Приклад 3. Анімація в двох напрямках

width = "650" height = "363" alt = "Анімація в двох напрямках" class = "alignnone size-full wp-image-7165" / gt;

Ну і останній приклад з анімацією CSS3 - це анімація на графіку в двох напрямках.

Для такого ефекту необхідно використовувати наступний CSS код і анімацію:

CSS КОД
123456789101112131415161718192021222324252627282930313233343536373839
/ * Графік # 3 * // * Колір, товщина і стиль другої лінії * /.chart3.ct-chart .ct-series.ct-series-b .ct-line {stroke: # E44A4A-stroke-width: 5px-stroke-dasharray: 30px 5px-stroke-linecap: round-animation: dasharray-craziness 10s infinite linear-}/ * Колір точки для другої лінії на графіку * /.chart3.ct-chart .ct-series.ct-series-b .ct-point{stroke: # E40D0D-}/ * Колір, товщина і стиль першої лінії * /.chart3.ct-chart .ct-series.ct-series-a .ct-line {stroke: # 949494-stroke-width: 5px-}/ * Колір точки для першої лінії на графіку * /.chart3.ct-chart .ct-series.ct-series-a .ct-point{stroke: # 656565-}/ * Анімація в двох напрямках на графіку * /@keyframes dasharray-craziness {0% {stroke-dasharray: 7px 2px-}80% {stroke-dasharray: 7px 100px-stroke-width: 10px}100% {stroke-dasharray: 7px 2px-}}

Цими прикладами я хотів показати, що створити гарний і, головне, що виділяється графік дійсно просто. Достатньо лише знати хоча б основи CSS3 анімації. Про це можна почитати за посиланням нижче.

Вивчіть уважно цю статтю, і тоді зможете створити будь-яку анімацію на CSS3: CSS3 анімація для самих маленьких.

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

[ВІДЕО] Можливості бібліотеки Chartist.js

висновок

Нині недостатньо просто зробити Лендінгем або просто зробити сайту. Це вже не працює. Зараз час, коли необхідно кожен елемент, кожен блок на сайті опрацьовувати та робити максимально унікальним, не забуваючи при цьому про основне дизайні сайту.

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

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!