Начална » Toolkit » Създавайте Cascading Effects лесно с CascadeJS

    Създавайте Cascading Effects лесно с CascadeJS

    Фантастичните анимации са монета от дузина в мрежата. Те стават по-лесни за създаване с много невероятни библиотеки за анимация.

    Cascade.js е още една библиотека, която да добавите към списъка, и определено е уникална. С Cascade можете да създадете персонализирани анимационни ефекти, като използвате каскадни букви в текст или каскадни елементи в основен контейнер.

    Тази библиотека има няма зависимости; работи на класически JavaScript. Можете да го инсталирате чрез npm, Bower или като изтеглите копие от GitHub.

    За да можете CascadeJS да работи, вие трябва два файла: CSS файл и JavaScript файл. И двамата идват опаковани умалени версии за да ви спести няколко KB в размер на страницата.

    Всеки каскаден елемент се разбива на отделни части, които анимирайте индивидуално през елементи. Това са добавя се динамично, така че не е необходимо да променяте нищо в HTML.

    Но трябва да го направите настройте поток () функция във файла си, след като сте насочили към елемента, който искате да анимирате.

    Всъщност можете използвайте jQuery с тази библиотека, ако искате, но това е не е задължително. Така че, ако предпочитате да избирате елементи с jQuery, тогава можете да го използвате вместо това.

    Ето едно фрагмент от ванилия JavaScript от демото на основния сайт:

      

    Можете да преминете поток () елемент с няма параметри, или можеш конфигурирайте ги всички себе си. Отнема осем опционални параметъра за редактиране на стила на анимация, времето, продължителността и незадължителните CSS класове.

    CascadeJS има друга функция фрагмент () което ви позволява раздели писма (или елементи) в отделни контейнери, без да ги анимират. Можете да използвате тази функция, за да цвят и текст на презапис на страницата, като насочите всяка отделна буква в дума. Много хладно, нали?

    всичко образци от кода открито са достъпни на главната страница на библиотеката, така че можете да копирате / поставите и да водите сам. Но ще намерите и документация на страницата на GitHub, ако търсите по-ясен начин да започнете.