Създавайте Cascading Effects лесно с CascadeJS
Фантастичните анимации са монета от дузина в мрежата. Те стават по-лесни за създаване с много невероятни библиотеки за анимация.
Cascade.js е още една библиотека, която да добавите към списъка, и определено е уникална. С Cascade можете да създадете персонализирани анимационни ефекти, като използвате каскадни букви в текст или каскадни елементи в основен контейнер.
Тази библиотека има няма зависимости; работи на класически JavaScript. Можете да го инсталирате чрез npm, Bower или като изтеглите копие от GitHub.
За да можете CascadeJS да работи, вие трябва два файла: CSS файл и JavaScript файл. И двамата идват опаковани умалени версии за да ви спести няколко KB в размер на страницата.
Всеки каскаден елемент се разбива на отделни части, които анимирайте индивидуално през елементи. Това са добавя се динамично, така че не е необходимо да променяте нищо в HTML.
Но трябва да го направите настройте поток ()
функция във файла си, след като сте насочили към елемента, който искате да анимирате.
Всъщност можете използвайте jQuery с тази библиотека, ако искате, но това е не е задължително. Така че, ако предпочитате да избирате елементи с jQuery, тогава можете да го използвате вместо това.
Ето едно фрагмент от ванилия JavaScript от демото на основния сайт:
Можете да преминете поток ()
елемент с няма параметри, или можеш конфигурирайте ги всички себе си. Отнема осем опционални параметъра за редактиране на стила на анимация, времето, продължителността и незадължителните CSS класове.
CascadeJS има друга функция фрагмент ()
което ви позволява раздели писма (или елементи) в отделни контейнери, без да ги анимират. Можете да използвате тази функция, за да цвят и текст на презапис на страницата, като насочите всяка отделна буква в дума. Много хладно, нали?
всичко образци от кода открито са достъпни на главната страница на библиотеката, така че можете да копирате / поставите и да водите сам. Но ще намерите и документация на страницата на GitHub, ако търсите по-ясен начин да започнете.