1. Прежде чем приступить к настройке данной модификации необходимо загрузить желаемое изображение в Зеро-блок через элемент
image или
shape. И указываешь ему тот же class, что и в генераторе (например, imagerotation). Класс нужно прописать
для каждого элемента, к которому будет применяться увеличение.
Что бы указать class у элемента, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь class.
2. В генераторе заполняешь поля:
- «Класс» — указываешь класс элемента, к которым будет применяться эффект увеличения (например, imagerotation);
- «Увеличение контейнера (%)» — указываешь необходимый размер увеличения контейнера;
- «Увеличение изображения (%)» — указываешь необходимый размер увеличения изображения;
- «Скорость (ms)» — скорость анимации;
- «Угол поворота при наведении на изображения» — это поле настраивает поворот внутри контейнера;
- «Угол поворота при наведении на контейнер» — это поле настраивает поворот всего контейнера;
- «Изменить z-index при наведении» — это поле необходимо заполнять в случае, если в блоке находится несколько элементов, которые наслаиваются друг на друга (или будут наслаиваться в случае проигрывания анимации). Чем выше этот параметр тем выше будет находиться элемент по отношению к другим элементам внутри Зеро блока, во время применения эффекта увеличения;
- «Тип анимации» — выбери понравившеюся анимацию из предложенного списка.
Дополнительно, можешь
- «Включить границы (overflow)»;
- «Отключить эффект на экранах меньше 1200px»;
3. Копируешь сгенерированный HTML код и вставляешь его в блок Т123;
Имей в виду:- Если настраиваешь дополнительно увеличение через sbs анимацию, увеличение не подействует и будет оставаться в рамках границ изображения при включенной настройке «Включить границы (overflow)»