Параметр disable

Библиотека AOS (Animate on Scroll) позволяет создавать анимации при прокрутке страницы с минимальным количеством кода. Один из ключевых глобальных параметров — disable. Он предназначен для контроля включения или отключения анимаций на определённых устройствах или при выполнении специфических условий. Понимание работы этого параметра критически важно для корректной адаптации анимаций под разные экраны и сценарии использования.

Синтаксис и типы значения

Параметр disable может принимать следующие значения:

AOS.init({
  disable: false // по умолчанию анимации включены
});

Возможные варианты:

  1. false Значение по умолчанию. Анимации всегда активны.

  2. true Полное отключение анимаций на всех устройствах.

  3. Функция Позволяет задавать условие динамически. Функция должна возвращать true или false. Пример:

AOS.init({
  disable: function() {
    return window.innerWidth < 768;
  }
});

В данном случае анимации будут отключены на экранах шириной меньше 768 пикселей.

  1. Строка с типом устройства Библиотека поддерживает указание устройства через строку: 'phone', 'tablet', 'mobile'. Пример:
AOS.init({
  disable: 'mobile'
});

Анимации отключаются на мобильных устройствах, а на десктопах остаются активными.

Использование с функцией

Использование функции предоставляет максимальную гибкость. Функция получает объект окна и может использовать любую логику для принятия решения:

AOS.init({
  disable: function() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    return width < 600 || height < 400;
  }
});

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

Практические сценарии

  1. Отключение на мобильных устройствах Мобильные устройства часто имеют ограниченные ресурсы, поэтому сложные анимации могут снижать производительность. Использование:
AOS.init({
  disable: 'mobile'
});

гарантирует плавность работы сайта на телефонах.

  1. Отключение при слабом соединении или малой производительности Можно динамически отключать анимации, проверяя возможности устройства:
AOS.init({
  disable: function() {
    return navigator.connection ? navigator.connection.saveData : false;
  }
});

Если включен режим экономии трафика (Save-Data), анимации будут отключены.

  1. Отключение для определённого разрешения экрана Часто применяют, чтобы упростить интерфейс на узких экранах:
AOS.init({
  disable: function() {
    return window.innerWidth < 1024;
  }
});

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

Параметр disable работает на глобальном уровне и влияет на все элементы с атрибутами data-aos. Если disable возвращает true или соответствует текущему устройству, все анимации отключаются, независимо от индивидуальных настроек data-aos.

Важно учитывать, что после инициализации AOS с включённым disable повторная инициализация с другим значением требует вызова:

AOS.refresh();

Или полной перезагрузки инициализации:

AOS.init({ disable: false });
AOS.refresh();

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

  • Для мобильных устройств и планшетов лучше использовать disable: 'mobile' или функцию с проверкой ширины окна.
  • Для сложных условий можно комбинировать проверку ширины, высоты и других параметров, включая режим экономии трафика или уровень производительности.
  • Параметр disable обеспечивает не только оптимизацию производительности, но и контроль UX: пользователь на слабом устройстве не будет испытывать тормозов при анимациях.

Примеры практического кода

Отключение анимаций на устройствах с шириной менее 768px:

AOS.init({
  disable: function() {
    return window.innerWidth < 768;
  },
  duration: 800,
  once: true
});

Полное отключение анимаций на мобильных устройствах и включение на всех остальных:

AOS.init({
  disable: 'mobile',
  offset: 200,
  easing: 'ease-in-out',
  duration: 600
});

Динамическое отключение при экономии трафика:

AOS.init({
  disable: function() {
    return navigator.connection && navigator.connection.saveData;
  },
  duration: 700
});

Параметр disable является мощным инструментом управления анимациями AOS, позволяя гибко адаптировать визуальные эффекты под разные устройства, условия сети и характеристики экрана.

Оглавление