Carousel
1. Создайте в Zero Block текстовый элемент. Скопируйте класс этого элемента с помощью расширения для браузера.

2. Задайте настройки в генераторе кода:
Класс_элемента — класс текстового элемента из п.1;
Текст — текст, который будет отображаться искажаться;
Цвет — цвет текста;
РазмерШрифта — размер шрифта;
ВнутреннийОтступ — отступ текста от края холста. Если вы заметили что часть искаженного текста обрезается в некоторых моментах, увеличьте внутренний отступ;
Насыщенность — насыщенность шрифта (font weight);
Начертание — начертание шрифта (normal или italic);
uSpeed, uVolatility, uSeed — настройки анимации.

3. Ниже на странице скопируйте код №1 и вставьте его в блок Т123. На странице должен быть только один код№1.

4. Для постоянной анимации скопируйте код №2 и вставьте его в блок Т123. Код будет уже с настройками, которые вы указали в генераторе. Для каждого элемента с искаженным текстом добавьте свой вариант кода №2.

5. Чтобы задать тексту анимацию по движению курсора, добавьте код№3 вместо кода№2 в блок Т123.

У анимируемого текста остается шрифт, указанный в настройках текстового элемента.

Искажение текста в Zero Block

Модификация позволяет анимировать искажение текста в Zero Block. Может работать постоянно или реагировать на движение курсора. Задайте настройки анимации в генераторе и добавьте в блок T123 код №1 и код №2 для постоянной анимации или код№3 для искажения по движению курсора.

Инструкция

Код №1:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/blotter.min.js" integrity="sha256-Wi+eM/P+ZpfBIAC/ZKV1/ACLooC9iwmGb2zz9tkbH/8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Blotter/0.1.0/materials/liquidDistortMaterial.min.js" integrity="sha256-mP6di89udUc+VXTHb1mPelLsRq52Ool/7PK7VyygsoY=" crossorigin="anonymous"></script>
Код №2:
Код №3:
Есть вопросы?
comments powered by HyperComments
Вот что есть еще
Made on
Tilda