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