В редакторе Creatium доступно более 60 различных анимаций. Все они делятся на два типа:
Особенности данного типа анимаций:
Чтобы включить анимацию для секции - нужно открыть настройки стилей у секции, а затем перейти в раздел "Эффекты".
Вот так работает анимаций с одинаковой задержкой воспроизведения:
А вот так, когда для разных секций установлено разное время задержки перед началом воспроизведения:
Чтобы включить анимацию для виджета - нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел "Эффекты".
Добавим эффект анимации при прокрутке для виджетов в секции с описанием товара.
Почему в момент прокрутки круговой эффект воспроизведения анимаций не сработал, а после обновления страницы сработал?
При прокрутке сначала будет воспроизводиться анимация для тех виджетов, которые первыми находятся в зоне видимости пользователя. А при обновлении страницы, все виджеты уже находятся в зоне видимости, по этому эффект кругового воспроизведения анимаций сработал.
Настраивать круговую анимацию, как правило имеет смысл в тех случаях, когда вы делитесь или рекламируете страницу указывая на неё быстрые ссылки.
Отличия этого типа анимаций от предыдущего:- Не воспроизводится автоматически в момент прокрутки страницы;- Воспроизводится каждый раз, когда над виджетом проходит курсор мыши.
Чтобы включить анимацию для виджета - нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел "Эффекты".
Чтобы включить анимацию для виджета "Кнопка" - нужно открыть настройки кнопки в гаечном ключе и перейти в раздел ”Вид” - "Эффекты".
В секции с описанием есть одно фото, но при наведении и клике на него ничего не происходит. Сделаем так, чтобы при клике по фоно открывалась форма, а при наведении воспроизводилась анимация.
Для этого понадобится вместо виджета "Картинка" добавить виджет "Кнопка-картинка", настроить в кнопке действия для открытия окна с формой и включить подходящую анимацию.
Отключение анимаций происходит точно так же, как и включение.
Анимация секций:
Анимация виджетов:
Анимация сама по себе является ресурсоёмким процессом, то есть она заставляет процессор вашего компьютера или смартфона рассчитывать динамическую траекторию движения элементов на экране все то время, пока анимация выполняется. К счастью на современных компьютерах и смартфонах вы вряд ли заметите какие-либо замедления в работе браузера или других программ в то время, как выполняется анимация, но так как не у всех посетителей вашей страницы будут современные и мощные устройства, будет лучше включить анимацию как можно для меньшего количества виджетов и секций.
Пример страницы с настроенными анимациями: https://examples.creatium.site/animations