К любому виджету на странице можно добавить эффект анимации по наведению курсора или по мере прокрутки страницы до места с его расположением. Рассмотрим в статье ниже, как это работает.

Анимация по наведению курсора

Выполним данную настройку за несколько шагов:

Шаг 1. Добавим виджет на секцию из панели редактора и настроим его вид.

В качестве примера возьмём виджет «Иконка».

Шаг 2. Перейдём в «Настройки виджета» (знак капли), во вкладку «Эффекты».

Шаг 3. Выбираем вкладку «По наведению курсора» и включаем анимацию по наведению курсора.

Шаг 4. Выбираем нужный эффект при наведении.

📝Важно! Анимация по наведению не воспроизводится в редакторе. Чтобы увидеть анимацию в действии, откройте предпросмотр, публикацию или нажмите на кнопку «Воспроизвести» справа от выпадающего списка эффектов.

Готово!✨ Теперь иконка будет анимироваться при наведении курсора мышки.

Примеры анимаций можно посмотреть на странице: http://4ybsulpm.plp7.ru/

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

Выполняем первые аналогично шагам 1 и 2 при настройке эффекта по наведению курсора. Далее добавляем анимацию виджету во вкладке «При прокрутке страницы» и включаем анимацию при прокрутке.

В выпадающем списке выберем анимацию.

Опция «Задержка появления анимации» позволяет отложить появление виджета по мере прокрутки страницы к нему.

Например, если задержку не устанавливать, виджет с эффектом появится незамедлительно. Проверить результат можно в режиме предосмотра или после публикации. В редакторе анимацию можно посмотреть кликом по кнопке «Воспроизвести».

📝Важно! Анимация при прокрутке работает, если в настройках редактора «Страница» активна функция «Эффект появления при прокрутке»:

Так мы добавили анимацию к виджету при прокрутке страницы!👍

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

«Kак ускорить загрузку страницы?»

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