Простое создание каскадных эффектов с помощью CascadeJS

Необычные анимации - это десятка в Интернете. Их становится легче создавать с огромным количеством невероятных библиотеки анимации.

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

Эта библиотека имеет нет зависимостей; он работает на классическом JavaScript. Вы можете установить его через npm, Bower или скачав копию прямо с GitHub.

Чтобы заставить работать CascadeJS, вы нужны два файла: файл CSS и файл JavaScript. Они оба приходят в комплекте с минимизированные версии чтобы сэкономить несколько КБ на размер страницы.

Каждый элемент Cascade разбивается на отдельные части, которые анимировать индивидуально через элементы. Это добавлено динамически, так что вам не нужно ничего менять в своем HTML.

Но вам нужно будет установить течь() функция в вашем файле после нацеливания на любой элемент, который вы хотите анимировать.

Вы можете на самом деле использовать JQuery с этой библиотекой, если вы хотите, однако это не требуется. Так что, если вы предпочитаете выбирать элементы с помощью jQuery, не стесняйтесь использовать это вместо.

Вот фрагмент ванильного JavaScript из демонстрации основного сайта:

Вы можете передать течь() элемент с без параметров, или вы можете настроить их все сам. Занимает восемь необязательных параметров для редактирования стиля анимации, времени, продолжительности и дополнительных классов CSS.

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

Все примеры кода открыто доступны на главной странице библиотеки, так что вы можете копировать / вставлять и мастерить самостоятельно. Но вы также найдете документация на странице GitHub, если вы ищете более понятный способ начать.