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

Шаг #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. Эффект анимации при наведении на объект готов → сохраните изменения.