Demo uifx-shark

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

Теория

Печатное появление текста — это анимация, которая отображает текст печатая, стирается и изменяется на новый. Анимация начинается, когда элемент появляется в области просмотра пользователя. Вы можете настроить анимацию с помощью следующих атрибутов:


              class="UifxText uifx_print"
              // класс


              uifx-threshold="*"
              // начнется когда * % элемента станет видимым ( по-умолчанию 0.1 - 10% )


              uifx-delay="*"
              // будет воспроизведена через * миллисекунд, после uifx-threshold


              uifx-speed="*"
              // скорость воспроизведения, * миллисекунд


              uifx-pause="*"
              // задержка напечатанного, * миллисекунд


              // каждую меняющуюся подстроку нужно обернуть в
              span

Практика


                    class="UifxText uifx_print"


                    uifx-delay="500"


                    uifx-speed="20"


                    uifx-pause="2000"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

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

Теория

Позиционированное появление текста — это анимация, которая плавно отображает текст на странице, изменяя его прозрачность и позицию. Анимация начинается, когда элемент становится видимым в области просмотра пользователя. Вы можете настроить анимацию с помощью следующих атрибутов:


              class="UifxText uifx_swim"
              // класс


              :class="uifx-up || uifx-down"
              // псевдокласс, задает направление СНИЗУ ВВЕРХ или СВЕРХУ СНИЗ


              uifx-threshold="*"
              // начнется когда * % элемента станет видимым ( по-умолчанию 0.1 - 10% )


              uifx-delay="*"
              // будет воспроизведена через * миллисекунд, после uifx-threshold


              uifx-speed="*"
              // скорость воспроизведения, * миллисекунд

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


              uifx-repeat="true"
              // каждый раз  будет воспроизведена, при попадании в область видимости экрана


              uifx-click="*"
              // начнется, когда произойдет клик по элементу с атрибутом
                uifx-trigger-open="*", закончится когда произойдет клик по элементу с
                атрибутом uifx-trigger-close="*". 
Атрибуты:
                uifx-threshold="*", uifx-delay="*" и
                uifx-repeat="true" игнорируются

Практика


                    class="UifxText uifx_swim"


                      :class="uifx-up"


                      :class="uifx-down"


                    uifx-delay="0"


                    uifx-speed="800"

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

Теория

Поэтапное появление текста — это анимация, которая плавно отображает текст на странице, изменяя его прозрачность и позицию каждой подстроки поочередно. Анимация начинается, когда элемент становится видимым в области просмотра пользователя. Вы можете настроить анимацию с помощью следующих атрибутов:


              class="UifxText uifx_swim"
              // класс


              :class="uifx-up || uifx-down"
              // псевдокласс, задает направление СНИЗУ ВВЕРХ или СВЕРХУ СНИЗ


              :class="uifx-word || uifx-symbol"
              // псевдокласс, задает появление ПО СЛОВАМ или ПО БУКВАМ


              uifx-threshold="*"
              // начнется когда * % элемента станет видимым ( по-умолчанию 0.1 - 10% )


              uifx-delay="*"
              // будет воспроизведена через * миллисекунд, после uifx-threshold


              uifx-speed="*"
              // скорость воспроизведения, * миллисекунд

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


              uifx-repeat="true"
              // каждый раз  будет воспроизведена, при попадании в область видимости экрана


              uifx-click="*"
              // начнется, когда произойдет клик по элементу с атрибутом
                uifx-trigger-open="*", закончится когда произойдет клик по элементу с
                атрибутом uifx-trigger-close="*". 
Атрибуты:
                uifx-threshold="*", uifx-delay="*" и
                uifx-repeat="true" игнорируются

Практика


                    class="UifxText uifx_swim"


                      :class="uifx-up"


                      :class="uifx-down"


                      :class="uifx-word"


                      :class="uifx-symbol"


                    uifx-delay="0"


                    uifx-speed="20"

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

Теория

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


              class="UifxText uifx_increment"
              // класс


              uifx-threshold="*"
              // начнется когда * % элемента станет видимым ( по-умолчанию 0.1 - 10% )


              uifx-delay="*"
              // будет воспроизведена через * миллисекунд, после uifx-threshold


              uifx-speed="*"
              // скорость воспроизведения, * миллисекунд

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


              uifx-repeat="true"
              // каждый раз  будет воспроизведена, при попадании в область видимости экрана


              uifx-click="*"
              // начнется, когда произойдет клик по элементу с атрибутом
                uifx-trigger-open="*", закончится когда произойдет клик по элементу с
                атрибутом uifx-trigger-close="*". 
Атрибуты:
                uifx-threshold="*", uifx-delay="*" и
                uifx-repeat="true" игнорируются

Практика


                    class="UifxText uifx_increment"


                    uifx-delay="500"


                    uifx-speed="5"

1000

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

Теория

Стандартное появление — это анимация, которая плавно отображает элемент на странице через изменение его прозрачности или блюра. Анимация начинается, когда элемент становится видимым в области просмотра пользователя. Вы можете настроить анимацию с помощью атрибутов:


              class="UifxFade uifx_fade"
              // класс


              uifx-threshold="*"
              // начнется когда * % элемента станет видимым ( по-умолчанию 0.1 - 10% )


              uifx-delay="*"
              // будет воспроизведена через * миллисекунд, после uifx-threshold


              uifx-speed="*"
              // скорость воспроизведения, * миллисекунд


              uifx-affect="opacity || blur-*"
              // значение, появление через ПРОЗРАЧНОСТЬ или БЛЮР ( * px )

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


              uifx-repeat="true"
              // каждый раз  будет воспроизведена, при попадании в область видимости экрана


              uifx-click="*"
              // начнется, когда произойдет клик по элементу с атрибутом
                uifx-trigger-open="*", закончится когда произойдет клик по элементу с
                атрибутом uifx-trigger-close="*". 
Атрибуты:
                uifx-threshold="*", uifx-delay="*" и
                uifx-repeat="true" игнорируются

Практика


                    class="UifxFade uifx_fade"


                    uifx-delay="0"


                    uifx-speed="500"


                      uifx-affect="opacity"


                      uifx-affect="blur-4"

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

Теория

Позиционированное появление — это анимация, которая плавно отображает элемент на странице, изменяя его позицию через прозрачность или блюр. Анимация начинается, когда элемент становится видимым в области просмотра пользователя. Вы можете настроить анимацию с помощью следующих атрибутов:


              class="UifxFade uifx_route"
              // класс


              :class="uifx-up || uifx-down || uifx-right || uifx-left"
              // псевдокласс, задает направление по осям


              uifx-threshold="*"
              // начнется когда * % элемента станет видимым ( по-умолчанию 0.1 - 10% )


              uifx-delay="*"
              // будет воспроизведена через * миллисекунд, после uifx-threshold


              uifx-speed="*"
              // скорость воспроизведения, * миллисекунд


              uifx-affect="opacity || blur-*"
              // значение, появление через ПРОЗРАЧНОСТЬ или БЛЮР ( * px )

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


              uifx-repeat="true"
              // каждый раз  будет воспроизведена, при попадании в область видимости экрана


              uifx-click="*"
              // начнется, когда произойдет клик по элементу с атрибутом
                uifx-trigger-open="*", закончится когда произойдет клик по элементу с
                атрибутом uifx-trigger-close="*". 
Атрибуты:
                uifx-threshold="*", uifx-delay="*" и
                uifx-repeat="true" игнорируются


              uifx-cut="true || false"
              // задаем overflow hidden для контейнера Да или НЕТ


              uifx-translate="*"
              // задаем значение css свойство translate ( по-умолчанию 200% )

Практика


                    class="UifxFade uifx_route"


                      :class="uifx-up"


                      :class="uifx-down"


                      :class="uifx-right"


                      :class="uifx-left"


                    uifx-delay="0"


                    uifx-speed="500"


                      uifx-cut="true"


                      uifx-cut="false"