Параметр openSpeed

В библиотеке Featherlight параметр openSpeed отвечает за скорость анимации открытия модального окна. Он задаётся в миллисекундах и определяет, за какой промежуток времени контент становится видимым пользователю. Управление этим параметром позволяет создавать более плавные и настраиваемые визуальные эффекты при открытии всплывающих окон.

Синтаксис и использование

openSpeed может быть установлен несколькими способами:

  1. При инициализации плагина для конкретного элемента:
$('.lightbox-trigger').featherlight({
    openSpeed: 500
});

В данном примере окно откроется за 500 миллисекунд. Значение по умолчанию в Featherlight — 250.

  1. Глобальная настройка для всех модальных окон:
$.featherlight.defaults.openSpeed = 700;

После этого все новые экземпляры Featherlight будут использовать 700 мс для открытия, если не указано иное в локальных настройках.

  1. Динамическое изменение при вызове через Jav * aScript:
$.featherlight($('#myContent'), {
    openSpeed: 300
});

Это позволяет индивидуально задавать скорость анимации для конкретного вызова модального окна.

Особенности работы

  • Тип значения: параметр принимает числовое значение в миллисекундах или строку 'fast' / 'slow', аналогично jQuery-анимации.
$('.lightbox-trigger').featherlight({ openSpeed: 'slow' });

  • Совмещение с closeSpeed: openSpeed влияет только на процесс открытия. Для закрытия используется отдельный параметр closeSpeed, что позволяет задавать разные темпы появления и исчезновения окна.

  • Анимация содержимого: Featherlight применяет fadeIn для открытия. Ускорение или замедление анимации через openSpeed изменяет длительность эффекта плавного появления, сохраняя структуру DOM и CSS свойства без изменений.

Влияние на пользовательский опыт

  • Малые значения (50–150 мс) делают окно практически мгновенным, что подходит для интерфейсов с высокой интерактивностью.
  • Средние значения (250–500 мс) создают естественный визуальный эффект, не задерживая внимание пользователя.
  • Большие значения (700–1000 мс и выше) подходят для демонстрационных эффектов или презентаций, но могут восприниматься как задержка в обычном интерфейсе.

Примеры комплексного использования

Настройка открытия и закрытия с разной скоростью:

$('.gallery-item').featherlight({
    openSpeed: 600,   // открытие плавно
    closeSpeed: 200   // закрытие быстро
});

Использование динамического значения через событие:

$('.dynamic-lightbox').on('click', function() {
    $.featherlight($(this).data('content'), {
        openSpeed: $(this).data('speed') || 400
    });
});

В этом примере значение openSpeed можно задавать через data-атрибут HTML-элемента, что повышает гибкость и адаптивность интерфейса.

Взаимодействие с другими опциями

  • afterOpen и beforeOpen: можно комбинировать с колбэками для выполнения дополнительных действий после завершения открытия. Анимация длительностью, заданной через openSpeed, завершится, и только потом выполнится afterOpen.
$('.lightbox-trigger').featherlight({
    openSpeed: 500,
    afterOpen: function(event){
        console.log('Модальное окно полностью открыто');
    }
});
  • CSS-анимации: при использовании кастомных CSS-трансформаций скорость открытия можно согласовать с openSpeed, чтобы изменение прозрачности и позиционирования совпадало с временным интервалом.

Рекомендации по использованию

  • Для стандартного UX чаще всего достаточно значения 250–400 мс.
  • При быстром интерактивном интерфейсе можно уменьшать до 100–150 мс, чтобы не тормозить пользователя.
  • Для презентационных эффектов или сложных анимаций допустимо увеличение до 700–1000 мс, но стоит контролировать восприятие задержки.

openSpeed — один из ключевых параметров Featherlight, который позволяет гибко настраивать визуальное восприятие модальных окон, делая интерфейс более плавным и отзывчивым.

Оглавление