Примеры реализаций: Анимация объектов с использованием собственного кода

CMS Smart Engine позволяет использовать собственный код при взаимодействии пользователя с объектом.

Для настройки анимации выберите объект → перейдите в панель настроек анимации → вкладка "Анимация при взаимодействии" → из списка типов анимации выберите "Своя функция" → затем перейдите на вкладку "Настройки" → пропишите код анимации.

Рассмотрим функционал на примере использования простейшей анимации (изменение цвета фона).


JavaScript функция:

this.querySelector(".smart-object--overlay").style.transition = "all .5s";
this.querySelector(".smart-object--overlay").style.backgroundColor = "rgb(36, 120, 187)";

Функция добавляет эффект плавности transition и изменяет фон.

JavaScript функция (при завершении):

this.querySelector(".smart-object--overlay").style.backgroundColor = "rgb(148, 185, 218)"; 

Функция возвращает исходный цвет фона.

Пример анимации: