Створити каскадні ефекти легко за допомогою CascadeJS

Незвичайні анімації - це десятка в Інтернеті. Вони стають легше створювати з тонн неймовірних бібліотеки анімації.

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

Ця бібліотека має немає залежностей; він працює на класичному JavaScript. Ви можете встановити його через npm, Bower або завантаживши право на копію з GitHub.

Для того, щоб CascadeJS працював, ви потрібні два файли: файл CSS і файл JavaScript. Вони обидва приходять упаковані з зменшені версії щоб заощадити кілька КБ на розмірі сторінки.

Кожен елемент каскаду розбивається на окремі частини, які анімувати окремо через елементи. Вони є додано динамічно, так що вам не потрібно нічого змінювати у своєму HTML.

Але, вам потрібно налаштувати потік () функції у файлі, після націлювання будь-якого елемента, який ви хочете анімувати.

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

Ось a фрагмент ванільного JavaScript з демонстраційної версії основного сайту:

Ви можете передати потік () елемент з немає параметрів, або ви можете налаштувати їх усі себе. Це бере вісім необов'язкових параметрів для редагування стилю анімації, часу, тривалості та додаткових класів CSS.

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

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