Как установить анимацию по наведению курсора?
К любому виджету на странице можно добавить эффект анимации по наведению курсора или по мере прокрутки страницы до места с его расположением. Рассмотрим в статье ниже, как это работает.
Анимация по наведению курсора
Выполним данную настройку за несколько шагов:
Шаг 1. Добавим виджет на секцию из панели редактора и настроим его вид.
В качестве примера возьмём виджет «Иконка».
Шаг 2. Перейдём в «Настройки виджета» (знак капли), во вкладку «Эффекты».
Шаг 3. Выбираем вкладку «По наведению курсора» и включаем анимацию по наведению курсора.
Шаг 4. Выбираем нужный эффект при наведении.
📝Важно! Анимация по наведению не воспроизводится в редакторе. Чтобы увидеть анимацию в действии, откройте предпросмотр, публикацию или нажмите на кнопку «Воспроизвести» справа от выпадающего списка эффектов.
Готово!✨ Теперь иконка будет анимироваться при наведении курсора мышки.
Примеры анимаций можно посмотреть на странице: http://4ybsulpm.plp7.ru/
Анимация при прокрутке страницы
Выполняем первые аналогично шагам 1 и 2 при настройке эффекта по наведению курсора. Далее добавляем анимацию виджету во вкладке «При прокрутке страницы» и включаем анимацию при прокрутке.
В выпадающем списке выберем анимацию.
Опция «Задержка появления анимации» позволяет отложить появление виджета по мере прокрутки страницы к нему.
Например, если задержку не устанавливать, виджет с эффектом появится незамедлительно. Проверить результат можно в режиме предосмотра или после публикации. В редакторе анимацию можно посмотреть кликом по кнопке «Воспроизвести».
📝Важно! Анимация при прокрутке работает, если в настройках редактора «Страница» активна функция «Эффект появления при прокрутке»:
Так мы добавили анимацию к виджету при прокрутке страницы!👍
Напоследок хотим обратить ваше внимание на то, что много анимации может нагрузить страницу. Если при просмотре сайта возникают неполадки с показом элементов, прерывистая прокрутка, то рекомендуется отключить эффекты для оптимизации страницы. Подробнее о других мерах можно узнать в статье