В редакторе Creatium доступно более 60 различных анимаций. Все они делятся на два типа:

  • Анимация при прокрутке;
  • Анимация при наведении.

АНИМАЦИЯ ПРИ ПРОКРУТКЕ

Особенности данного типа анимаций:
- Можно включить для секций и виджетов;
- Срабатывают только один раз, в тот момент, когда секция или виджет расположены в зоне видимости окна браузера.


Чтобы включить анимацию для секции
- нужно открыть настройки стилей у секции, а затем перейти в раздел "Эффекты".

  • В момент выбора анимации она автоматически воспроизведется в редакторе;
  • Повторить анимацию можно нажатием на кнопку ”Воспроизвести”;
  • Параметр ”Задержка выполнения анимации” позволяет задать промежуток времени между отсутствием анимации и началом её воспроизведения. 

Вот так работает анимаций с одинаковой задержкой воспроизведения:

А вот так, когда для разных секций установлено разное время задержки перед началом воспроизведения:

Чтобы включить анимацию для виджета - нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел ”Эффекты”.

Добавим эффект анимации при прокрутке для виджетов в секции с описанием товара.

Заметка: на видео включается анимация для родительского виджета, то есть для того, в котором сосредоточены все остальные виджеты. Когда нужно анимировать целую группу виджетов одновременно - на много проще поместить их в виджет ”Блок”, а затем включить анимацию только для него. В следующий раз, когда нужно будет изменить анимацию на другую, менять её придется только у родительского виджета, а не у всей группы виджетов.


Почему в момент прокрутки круговой эффект воспроизведения анимаций не сработал, а после обновления страницы сработал?

При прокрутке сначала будет воспроизводиться анимация для тех виджетов, которые первыми находятся в зоне видимости пользователя. А при обновлении страницы, все виджеты уже находятся в зоне видимости, по этому эффект кругового воспроизведения анимаций сработал.

Настраивать круговую анимацию, как правило имеет смысл в тех случаях, когда вы делитесь или рекламируете страницу указывая на неё быстрые ссылки.

АНИМАЦИЯ ПРИ НАВЕДЕНИИ

Отличия этого типа анимаций от предыдущего:
- Не воспроизводится автоматически в момент прокрутки страницы;
- Воспроизводится каждый раз, когда над виджетом проходит курсор мыши.


Чтобы включить анимацию для виджета
- нужно открыть настройки стилей у виджета (кнопка в форме капельки) и перейти в раздел ”Эффекты”.

Чтобы включить анимацию для виджета "Кнопка" - нужно открыть настройки кнопки в гаечном ключе и перейти в раздел ”Вид” - "Эффекты".

В секции с описанием есть одно фото, но при наведении и клике на него ничего не происходит. Сделаем так, чтобы при клике по фоно открывалась форма, а при наведении воспроизводилась анимация.

Для этого понадобится вместо виджета ”Картинка” добавить виджет ”Кнопка-картинка”, настроить в кнопке действия для открытия окна с формой и включить подходящую анимацию.

ОТКЛЮЧЕНИЕ АНИМАЦИЙ НА СТРАНИЦЕ

Отключение анимаций происходит точно так же, как и включение.

В случае, когда нужно быстро отключить анимации при прокрутке только для секций или только для виджетов -  это можно сделать на вкладке ”Страница”, раздел ”Анимация”. Эти настройки не влияют на анимацию при наведении.

Анимация секций:

  • Эффект появления при прокрутке - разрешает анимациям секций выполняться при прокрутке;
  • Слайдер секции - включает особый тип перехода между секциями. Подробнее о его настройке написано в этой инструкции;
  • Отключить - запрещает анимациям секций выполняться при прокрутке.

Анимация виджетов:

  • Эффект появления при прокрутке - разрешает воспроизведение анимаций виджетов при прокрутке;
  • Отключить - запрещается воспроизведение анимаций виджетов при прокрутке.

РЕКОМЕНДАЦИИ ПО РАБОТЕ С АНИМАЦИЯМИ

Анимация сама по себе является ресурсоёмким процессом, то есть она заставляет процессор вашего компьютера или смартфона рассчитывать динамическую траекторию движения элементов на экране все то время, пока анимация выполняется. К счастью на современных компьютерах и смартфонах вы вред ли заметите какие-либо замедления в работе браузера или других программ в то время, как выполняется анимация, но так как не у всех посетителей вашей страницы будут современные и мощные устройства, будет лучше включить анимацию как можно для меньшего количества виджетов и секций.


Пример страницы с настроенными анимациями
в редакторе и на опубликованном варианте.

ДОПОЛНИТЕЛЬНЫЕ МАТЕРИАЛЫ

Вы нашли ответ?