Как добавить анимацию в popup WordPress для улучшения UX

Автор: Евгения Ширяева | Опубликовано: 19.01.2026

Всплывающие окна (popup) — эффективный инструмент для привлечения внимания пользователей и повышения конверсии на сайте. Но статичные popup могут раздражать, если они резко появляются без плавного перехода. Добавление анимации делает появление и скрытие popup более приятным и профессиональным. В этой статье подробно разберём, как добавить анимацию в popup WordPress с примерами кода и рекомендациями по использованию плагинов.

Зачем нужна анимация для popup в WordPress

Анимация в popup улучшает пользовательский опыт (UX) несколькими способами:

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

Однако важно не переборщить с эффектами, чтобы не замедлять сайт и не раздражать посетителей.

Как добавить анимацию в popup с помощью CSS3

Самый лёгкий способ — использовать CSS-анимации и переходы. Рассмотрим пример простого popup с плавным появлением и исчезновением через изменение прозрачности и сдвиг по оси Y.

HTML структура popup

Создадим базовую разметку:

<div id="wppopup-popup" class="wppopup-hidden">
  <div class="wppopup-content">
    <button id="wppopup-close">Закрыть</button>
    <p>Это пример popup с анимацией.</p>
  </div>
</div>

CSS для анимации

Добавим стили, которые управляют видимостью и анимацией:

.wppopup-hidden {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.wppopup-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

Такой CSS задаёт плавное появление с подъёмом окна. Класс wppopup-hidden скрывает popup, wppopup-visible — показывает.

JavaScript для управления popup

Добавим скрипт для управления состояниями:

document.addEventListener('DOMContentLoaded', function() {
  const popup = document.getElementById('wppopup-popup');
  const closeBtn = document.getElementById('wppopup-close');

  function wppopupShow() {
    popup.classList.remove('wppopup-hidden');
    popup.classList.add('wppopup-visible');
  }

  function wppopupHide() {
    popup.classList.remove('wppopup-visible');
    popup.classList.add('wppopup-hidden');
  }

  closeBtn.addEventListener('click', wppopupHide);

  // Показ popup через 2 секунды после загрузки страницы
  setTimeout(wppopupShow, 2000);
});

Этот код плавно показывает popup через 2 секунды после загрузки и даёт пользователю возможность закрыть окно с анимацией скрытия.

Использование анимаций в популярных плагинах popup для WordPress

Если вы используете плагины для popup, многие из них уже поддерживают анимации или позволяют подключить свои. Рассмотрим пару примеров:

1. Плагин My Popup (https://wpshop.ru/my-popup/?utm_source=wppopup.ru&utm_medium=article&utm_campaign=kak-dobavit-animaciyu-v-popup-wordpress)

Этот плагин из WPShop предлагает базовые эффекты анимации (fade, slide, zoom). В настройках popup можно выбрать эффект появления и задать скорость анимации.

Если хочется кастомных эффектов, My Popup позволяет добавить свои CSS-классы, куда можно прописать анимацию, как в примере выше.

2. Popup Maker

Popup Maker — один из самых популярных плагинов с поддержкой анимаций. В нем есть готовые эффекты и возможность добавить свои через CSS.

Чтобы добавить кастомную анимацию, нужно:

В админке Popup Maker перейти в настройки конкретного popup.
Выбрать вкладку "Display" → "Animation".
Выбрать предустановленный эффект или задать CSS-класс с нужными стилями.

Создание кастомной анимации с использованием библиотеки Animate.css

Animate.css — популярная библиотека CSS-анимаций, которую легко подключить и использовать для popup.

Для использования с нашим popup:

Подключите Animate.css в тему или через плагин (например, в header.php):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

В JS добавьте классы из Animate.css при показе и удаляйте их при скрытии:

function wppopupShow() {
  popup.classList.remove('wppopup-hidden');
  popup.classList.add('wppopup-visible', 'animate__animated', 'animate__fadeInDown');
}

function wppopupHide() {
  popup.classList.remove('animate__fadeInDown');
  popup.classList.add('animate__fadeOutUp');

  popup.addEventListener('animationend', function handler() {
    popup.classList.remove('animate__animated', 'animate__fadeOutUp', 'wppopup-visible');
    popup.classList.add('wppopup-hidden');
    popup.removeEventListener('animationend', handler);
  });
}

Так popup будет появляться с эффектом fadeInDown и исчезать с fadeOutUp.

Учет мобильных устройств и производительности при анимации popup

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

Отключайте сложные анимации на мобильных устройствах через CSS media queries или JS.
Используйте hardware-accelerated CSS свойства, например, transform и opacity, избегайте изменения top, left, width и height.
Проверяйте плавность анимации на разных браузерах и устройствах.
Минимизируйте количество одновременных анимаций.

Функция для добавления анимации popup в тему WordPress на примере wppopup.ru

Для удобства добавим универсальную функцию, которую можно подключить в functions.php вашей темы:

function wppopupru_add_popup_animation_scripts() {
  wp_enqueue_style('animate-css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css', array(), '4.1.1');

  wp_add_inline_script('jquery-core', "
    jQuery(document).ready(function($) {
      const popup = $('#wppopup-popup');
      const closeBtn = $('#wppopup-close');

      function wppopupruShow() {
        popup.removeClass('wppopup-hidden').addClass('wppopup-visible animate__animated animate__fadeInDown');
      }

      function wppopupruHide() {
        popup.removeClass('animate__fadeInDown').addClass('animate__fadeOutUp');
        popup.one('animationend', function() {
          popup.removeClass('animate__animated animate__fadeOutUp wppopup-visible').addClass('wppopup-hidden');
        });
      }

      closeBtn.on('click', wppopupruHide);

      setTimeout(wppopupruShow, 2000);
    });
  ");
}
add_action('wp_enqueue_scripts', 'wppopupru_add_popup_animation_scripts');

Эта функция подключит Animate.css и JS для показа popup с анимацией через 2 секунды.

Выводы и рекомендации по анимации popup в WordPress

Добавление анимации в popup — простой и эффективный способ улучшить UX и повысить конверсию. Выбирайте плавные эффекты с использованием CSS3 или подключайте готовые библиотеки вроде Animate.css. Если используете плагины, изучите их настройки анимации и возможности кастомизации. Обязательно тестируйте на мобильных устройствах и следите за производительностью.

Для дальнейшей автоматизации и расширенных возможностей попробуйте плагин My Popup из WPShop — он поддерживает анимацию, события и гибкую настройку popup без лишнего кода.