Анимация при взаимодействии с объектами

В данном видеоуроке подробно показано, как добавить эффекты анимации при взаимодействии с объектами в среде визуальной верстки CMS Smart Engine.

Добавление анимации при взаимодействии с объектами

Шаг #1. В разделе «Медиа» на панели инструментов выберите «Подложка» → перетащите элемент в среду визуальной верстки. 

Шаг #2. В появившейся панели переключитесь во вкладку «Ориентация» → укажите ориентацию объекта (по середине, по центру) → укажите отступы от базовой точки (слева: 0 px, сверху: 0 px) . 

Шаг #3. Над «Подложкой» (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → укажите цвет разделителя (#cccccc, прозрачность: 0.5). 

Шаг #4. В панели «Информация» установите ширину и высоту подложки (ширина: 400 px, высота: 450 px).

Шаг #5. В разделе «Медиа» на панели инструментов выберите «Фото» → перетащите элемент в среду визуальной верстки (разместите внутри подложки) → загрузите необходимое изображение с компьютера или из интернета.

Шаг #6. В разделе «Медиа» на панели инструментов выберите «Текст» → перетащите элемент в среду визуальной верстки (разместите внутри подложки, под изображением) .  

Шаг #7. Над текстом (в верхнем левом углу) появятся иконки с возможными действиями → нажмите на иконку «Настройки» (знак шестеренки) → выберите стиль текста.

Шаг #8. Над текстом (в верхнем левом углу) нажмите на иконку «Редактировать» (знак карандаша) → вставьте или наберите текст .

Шаг #9. Выделите все объекты → задайте выравнивание во вкладке «Выравнивание» (горизонтальное, по центру).

Шаг #10. Нажмите на элемент «Фото» → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку Копировать (знак «+») → разместите скопированное изображение над оригиналом. 

Шаг #11. Нажмите на скопированный элемент «Фото» → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку Заменить фото → выберите необходимое изображение.

Шаг #12. Выделите оба изображения и выровняйте их  → задайте выравнивание скопированного изображения относительно оригинала во вкладке «Выравнивание» (горизонтальное, по левому краю) → «Выравнивание» (вертикальное, по верху) .

Шаг #13.  Точно так же скопируйте элемент «Подложка» → над «Подложкой» (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку «Настройки» (знак шестеренки) → укажите цвет разделителя (#f5c860, прозрачность: 1) → и выровняйте ее относительно оригинала.

Шаг #14. Настройте порядок объектов в панели слоев → необходимо, чтобы скопированные объекты оказались над своими оригиналами. 

Шаг #15. Выберите скопированный элемент «Подложка» → над изображением (в верхнем левом углу) появятся иконки с возможными действиями. Нажмите на иконку Эффекты → выберите анимацию при взаимодействии → тип анимации: проявление.

Шаг #16. Тоже самое повторите для скопированного элемента «Фото».

Шаг #17. Выделите все объекты и сгруппируйте их (Ctrl+G).

Шаг #18. Эффект анимации при наведении на объект готов → сохраните изменения.