📋

Анимации при прокрутке и при наведении

Как включить и настроить анимации на странице

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

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

Анимация при прокрутке

Особенности данного типа анимаций:

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

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

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

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

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

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

image

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

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

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

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

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

Анимация при наведении

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

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

image

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

image

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

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

Отключение анимаций на странице

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

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

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

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

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

Рекомендации по работе с анимациями

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

Пример страницы с настроенными анимациями: https://examples.creatium.site/animations