В редакторе Creatium доступно более 60 различных анимаций. Все они делятся на два типа:
Анимация при прокрутке;
Анимация при наведении.
АНИМАЦИЯ ПРИ ПРОКРУТКЕ
Особенности данного типа анимаций:
Можно включить для секций и виджетов;
Срабатывают только один раз, в тот момент, когда секция или виджет расположены в зоне видимости окна браузера.
Чтобы включить анимацию для секции - нужно открыть настройки стилей у секции, а затем перейти в раздел "Эффекты".
В момент выбора анимации она автоматически воспроизведется в редакторе;
Повторить анимацию можно нажатием на кнопку ”Воспроизвести”;
Параметр ”Задержка выполнения анимации” позволяет задать промежуток времени между отсутствием анимации и началом её воспроизведения.
Вот так работает анимаций с одинаковой задержкой воспроизведения:
А вот так, когда для разных секций установлено разное время задержки перед началом воспроизведения:
Чтобы включить анимацию для виджета - нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел ”Эффекты”.
Добавим эффект анимации при прокрутке для виджетов в секции с описанием товара.
Заметка: на видео включается анимация для родительского виджета, то есть для того, в котором сосредоточены все остальные виджеты. Когда нужно анимировать целую группу виджетов одновременно - на много проще поместить их в виджет ”Блок”, а затем включить анимацию только для него. В следующий раз, когда нужно будет изменить анимацию на другую, менять её придется только у родительского виджета, а не у всей группы виджетов.
Почему в момент прокрутки круговой эффект воспроизведения анимаций не сработал, а после обновления страницы сработал?
При прокрутке сначала будет воспроизводиться анимация для тех виджетов, которые первыми находятся в зоне видимости пользователя. А при обновлении страницы, все виджеты уже находятся в зоне видимости, по этому эффект кругового воспроизведения анимаций сработал.
Настраивать круговую анимацию, как правило имеет смысл в тех случаях, когда вы делитесь или рекламируете страницу указывая на неё быстрые ссылки.
АНИМАЦИЯ ПРИ НАВЕДЕНИИ
Отличия этого типа анимаций от предыдущего:
- Не воспроизводится автоматически в момент прокрутки страницы;
- Воспроизводится каждый раз, когда над виджетом проходит курсор мыши.
Чтобы включить анимацию для виджета - нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел ”Эффекты”.
Чтобы включить анимацию для виджета "Кнопка" - нужно открыть настройки кнопки в гаечном ключе и перейти в раздел ”Вид” - "Эффекты".
В секции с описанием есть одно фото, но при наведении и клике на него ничего не происходит. Сделаем так, чтобы при клике по фоно открывалась форма, а при наведении воспроизводилась анимация.
Для этого понадобится вместо виджета ”Картинка” добавить виджет ”Кнопка-картинка”, настроить в кнопке действия для открытия окна с формой и включить подходящую анимацию.
ОТКЛЮЧЕНИЕ АНИМАЦИЙ НА СТРАНИЦЕ
Отключение анимаций происходит точно так же, как и включение.
Анимация секций:
Эффект появления при прокрутке - разрешает анимациям секций выполняться при прокрутке;
Слайдер секции - включает особый тип перехода между секциями. Подробнее о его настройке написано в этой инструкции;
Отключить - запрещает анимациям секций выполняться при прокрутке.
Анимация виджетов:
Эффект появления при прокрутке - разрешает воспроизведение анимаций виджетов при прокрутке;
Отключить - запрещается воспроизведение анимаций виджетов при прокрутке.
РЕКОМЕНДАЦИИ ПО РАБОТЕ С АНИМАЦИЯМИ
Анимация сама по себе является ресурсоёмким процессом, то есть она заставляет процессор вашего компьютера или смартфона рассчитывать динамическую траекторию движения элементов на экране все то время, пока анимация выполняется. К счастью на современных компьютерах и смартфонах вы вряд ли заметите какие-либо замедления в работе браузера или других программ в то время, как выполняется анимация, но так как не у всех посетителей вашей страницы будут современные и мощные устройства, будет лучше включить анимацию как можно для меньшего количества виджетов и секций.
Пример страницы с настроенными анимациями в редакторе и на опубликованном варианте.
