UIFX Shark

Оживите свои проекты с UIFX Shark

Исследуйте безграничные возможности UIFX Shark для создания потрясающих анимаций текста, слайдеров, меню и всплывающих окон. Добавьте уникальный стиль и динамику вашим проектам, создавая незабываемые впечатления для пользователей.

🎥 Посмотреть примеры работы библиотеки

Установка

Подключение через npm или yarn

Установите библиотеку с помощью npm:

npm install uifx-shark

Подключение через CDN

Добавьте следующие строки в ваш HTML файл:

<link rel="stylesheet" href="https://your-cdn-url/dist/uifxshark.css">
<script src="https://your-cdn-url/dist/uifxshark.js"></script>

Возможности и настройки анимаций

Печатное появление текста

Анимация отображает текст, как будто он печатается, стирается и заменяется новым.

Настройки атрибутов:

class="UifxText uifx_print"       <!-- Класс для анимации -->
uifx-threshold="*"               <!-- Запуск при *% видимости элемента (по умолчанию 0.1 = 10%) -->
uifx-delay="*"                  <!-- Задержка в миллисекундах после достижения uifx-threshold -->
uifx-speed="*"                  <!-- Скорость анимации в миллисекундах -->
uifx-pause="*"                  <!-- Пауза после отображения текста в миллисекундах -->

Каждую меняющуюся подстроку необходимо обернуть в <span>.

Позиционированное появление текста

Анимация плавно изменяет прозрачность и позицию текста при его появлении.

Настройки атрибутов:

class="UifxText uifx_swim"       <!-- Класс для анимации -->
:class="uifx-up || uifx-down"    <!-- Направление анимации (снизу вверх или сверху вниз) -->
uifx-threshold="*"               <!-- Запуск при *% видимости элемента -->
uifx-delay="*"                  <!-- Задержка в миллисекундах -->
uifx-speed="*"                  <!-- Скорость анимации в миллисекундах -->

Дополнительные фичи:

• uifx-repeat="true" — Анимация повторяется при каждом попадании элемента в область видимости.
• uifx-click="*" — Запуск анимации по клику.
  • Для этого укажите:
    • uifx-trigger-open="*" для начала.
    • uifx-trigger-close="*" для завершения.

Поэтапное появление текста

Эффект поочередного отображения текста, слова за словом или буква за буквой.

Настройки атрибутов:

class="UifxText uifx_swim"         <!-- Класс для анимации -->
:class="uifx-up || uifx-down"      <!-- Направление анимации -->
:class="uifx-word || uifx-symbol" <!-- Режим отображения: по словам или по буквам -->
uifx-threshold="*"                 <!-- Запуск при *% видимости элемента -->
uifx-delay="*"                    <!-- Задержка -->
uifx-speed="*"                    <!-- Скорость анимации -->

Дополнительные фичи:

• uifx-repeat="true"
• uifx-click="*" (аналогично предыдущему).

Возрастание числа

Анимация плавно увеличивает значение числа от нуля до заданного.

Настройки атрибутов:

class="UifxText uifx_increment"    <!-- Класс для анимации -->
uifx-threshold="*"                 <!-- Запуск при *% видимости элемента -->
uifx-delay="*"                    <!-- Задержка -->
uifx-speed="*"                    <!-- Скорость увеличения -->

Стандартное появление

Плавное отображение элемента через изменение прозрачности или размытия.

Настройки атрибутов:

class="UifxFade uifx_fade"        <!-- Класс для анимации -->
uifx-threshold="*"               <!-- Запуск при *% видимости элемента -->
uifx-delay="*"                  <!-- Задержка -->
uifx-speed="*"                  <!-- Скорость анимации -->
uifx-affect="opacity || blur-*"  <!-- Эффект: прозрачность или размытие (*px) -->

Позиционированное появление

Элемент плавно появляется с изменением позиции, прозрачности или размытия.

Настройки атрибутов:

class="UifxFade uifx_route"       <!-- Класс для анимации -->
:class="uifx-up || uifx-down || uifx-right || uifx-left" <!-- Направление по осям -->
uifx-threshold="*"               <!-- Запуск при *% видимости элемента -->
uifx-delay="*"                  <!-- Задержка -->
uifx-speed="*"                  <!-- Скорость -->
uifx-affect="opacity || blur-*"  <!-- Прозрачность или размытие (*px) -->
uifx-cut="true || false"         <!-- Установка overflow hidden: Да или Нет -->
uifx-translate="*"              <!-- Значение CSS translate (по умолчанию 200%) -->

Дополнительные фичи:

• uifx-repeat="true"
• uifx-click="*" (аналогично предыдущему).