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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *