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