Добавление и редактирование элементов

Чтобы добавить элемент на страницу, нажмите «плюс» в левом верхнем углу. Вы можете добавить текст, изображение, объект или кнопку.

В Zero Block поддерживаются все основные манипуляции с объектами, выполняемые с помощью мышки или же клавиатуры: перемещать, менять размер, копировать, выделять несколько объектов, сочетание горячих клавиш (Ctrl+V, Ctrl+C и т.д).

По умолчанию панель настроек всегда свернута, чтобы рабочее пространство было свободнее. Нажимаем кнопку «TAB» для открытия настроек. Пройдёмся по каждой настройке.

Верхний ряд кнопок служит для быстрого выравнивания элемента относительно контейнера по вертикали и горизонтали (1). Далее идут настройки координат и расположение объектов. (2,3) (см. рис.2)

Рисунок 2 – настройки блока

Прокручивая настройки ниже, видим настройки прозрачности (4), вращения объекта (5), положение касательно других объектов (6) и действия над ними(7). А также можно сделать кликабельным ваш объект, вставив ссылку на него (8). (см.рис.3).

Рисунок 3 – настройки пошаговой анимации

Анимация в Zero Block

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

Базовая анимация

Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.

Раздел базовой анимации имеет несколько опций:

• Animation — это разные варианты анимации появления элемента;
• Parallax — это настройки эффекта параллакса элемента;
• Fixing — это настройки эффекта фиксации

У анимации появления есть несколько вариантов — простое появление (Fade In), появление справа, слева, сверху и снизу (Fade In Right, Fade In Left, Fade In Up,Fade In Down) и появление с увеличением (Zoom In).

В настройках каждого вида анимации появления есть общие опции Duration, Delay и Trigger Offset.

Duration — это время анимации в секундах. Оно позволяет установить, как долго будет появляться элемент;

Delay — задержка перед началом анимации в секундах;

Trigger Offset — это отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация.

При использовании анимаций с появлением сверху, снизу, справа или слева появляется дополнительно параметр Distance — это дистанция, которую проходит блок, пока появляется с нужного края.
При использовании появления с увеличением (Zoom In) есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.

Parallax - Анимация параллакса имеет две настройки — параллакс может быть по скроллу и по движению мыши.

В настройках параллакса по скроллу есть настройка скорости параллакса (Speed). Если скорость указана меньше, чем 100%, то элемент движется медленнее скролла страницы, если скорость больше 100% — то быстрее.

В настройках параллакса по движению мыши есть настройки дистанции по осям X и Y, они устанавливают максимальное отклонение элемента при параллаксе.

Fixing - у анимации фиксации есть выбор настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom).

Настройка Trigger Offset — это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.
Distance — это расстояние в пикселях, которое должен пройти объект в режиме фиксации.

Пошаговая анимация.

Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.

Для того чтобы добавить анимацию нужно добавить новый элемент на Zero Block, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.