Scroll анимация в обе стороны Web Builder


Реализация стандартной анимации в обе стороны при прокрутке страницы, в программе WYSIWYG Web Builder. Анимация будет срабатывать при прокрутке вниз и вверх (каждый раз), когда объект окажется в определенном месте, на веб-странице.
Способ с использованием стилей (меньше весит)
Верхнее Меню -- Инструменты -- Менеджер Стилей -- Добавить
Создание стиля с css-анимацией:
Имя стиля: animation1 (обязательно на латинице).
В разделе «Анимация»
Имя анимации:
transform-bounch-in (выберите из выпадающего списка).
Длительность анимации: 1500
Счётчик циклов анимации: 1
Длительность перехода: 0
Все остальные параметры оставьте по умолчанию. Нажмите на кнопку: OK
Создание 2-го стиля без css-анимации:
Менеджер Стилей -- Добавить
Имя стиля: no_animation
Все остальные параметры оставьте по умолчанию. Нажмите на кнопку: OK
Параметры закладки (для текста, объекта)
Toolbox -- Закладка -- Разместите закладку напротив текста
Свойства объекта (закладки) -- События -- Добавить
Событие: onscrollreveal
Действие: Задать стиль
Цель: выберите id (текста, объекта) для анимации
Стиль: animation1 -- (далее нажмите на кнопку: OK)
Добавьте ещё одно событие для закладки:
Событие: onscrollhide
Действие: Задать стиль
Цель: выберите тот же id (текста, объекта) для анимации
Стиль: no_animation -- (далее нажмите на кнопку: OK)
Для корректного отображения данной анимации добавьте ещё два события.
Событие: onscrollreveal
Действие: Show (Показать)
Цель: выберите тот же id (далее нажмите на кнопку: OK)
Второе событие:
Событие: onscrollhide
Действие: Hide (Скрыть)
Цель: выберите тот же id (далее нажмите на кнопку: OK)
Демо-пример анимации в обе стороны при прокрутке
Быстрый способ scroll анимации в обе стороны (много весит)
Разместите объект на странице вашего проекта и добавьте закладку напротив этого объекта (позиция, место размещения закладки влияет, где именно будет выполнена анимация при прокрутке страницы).
Свойства объекта (закладки) -- События -- Добавить
Событие: onscrollreveal
Действие: Отображать с эффектами
Цель: выберите id (объект для анимации)
Эффект: Fade (выберите эффект)
Длина: 0 (или ваше значение)
Очистка: linear (выберите очистку)
Второе событие:
Событие: onscrollhide
Действие: Hide (Скрыть)
Цель: выберите тот же id объекта для анимации
Параметры объекта (текста) с анимацией
Свойства объекта -- вкладка -- CSS3 анимация -- Анимации -- Добавить
Анимация: transform-bounch-in
Длительность: 3000
Счётчик повторов: 1
Режим заполнения: backwards
Все остальные параметры оставьте по умолчанию. Нажмите на кнопку: OK
Этот способ предназначен для объектов находящихся в глубине страницы (эффект анимации аналогичен способу с использованием стилей). Например для анимации липкого слоя (блока) с меню, когда он изначально скрыт и при прокрутке появляется сверху и т.д., делается это ещё проще используя в закладке только события, в обратном действие с добавлением эффектов для обоих событий.
Скачать исходник .wbs (версия 12.3.0)