Для того чтобы добавить анимации появления для элементов в Зеро блоке нужно сделать следующее:
1. «Введите класс элемента (image, shape, text)» — В модификации нужно указать название класса, который мы будем добавлять к элементам в Зеро блоке, чтобы модификация понимала к какому элементу ей добавлять анимацию. Например — anim_shape;
2. «Отключить на мобильных устройствах» — При желании можно отключить анимацию на мобильных устройствах. Для этого активируйте ограничение, нажав на галочку рядом с текстом «Отключить на мобильных устройствах»;
3. «Проигрывать анимацию каждый раз, когда элемент на экране» — Есть возможность активировать функцию «Проигрывать анимацию каждый раз, когда элемент на экране». По умолчанию анимация проигрывается каждый раз когда элемент на экране.
4. «Тип анимации» — На выбор предлагается один из 10 анимации появления элемента.
5. «Включите этот чекбокс если анимация не работает в сафари».
6. «Прозрачность фона, %» — Указывает уровень прозрачности: 0% — полностью прозрачный (невидим), 100% — полностью непрозрачный. Работает только с шейпами.
7. «Задержка до начала анимации (мс)» — Время в миллисекундах до начала проигрывания анимации. Например, 500 мс = полсекунды задержки.
8. «Время проигрывания анимации (мс)» — Длительность анимации в миллисекундах от начала до конца. Например, 300 мс — быстрая анимация, 1000 мс — более плавная.
9. Дальше скопируйте название класса, которое вы указали и перейдите в Зеро блок;
10. Для того чтобы добавить анимацию к элементу в Зеро блоке, нажмите правой кнопкой мыши на элемент и выберите пункт «Add CSS Class Name»;
11. В открывшейся панели, в поле «CSS Class Name» укажите класс, который вы придумали и указали в модификации;
12. Сохраните изменения и перейдите во вкладку модификации;
13. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Важно:
- Текстовый элемент не должен выходить за пределы блока по высоте/ширине, иначе текст не отобразится на странице.
- Для текстовых элементов нужно изменить настройку FIT на Fixed Size. Где найти: Редактировать блок → Element Settings → Fit