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

Headroom.js — это легковесная библиотека для управления видимостью элементов на странице при прокрутке. Главная её задача — автоматически скрывать или показывать элементы, чаще всего шапку сайта (header), в зависимости от направления прокрутки. Она работает на основе событий scroll и состояния элемента в документе, обеспечивая плавную анимацию без сторонних библиотек для анимации.

Ключевое поведение заключается в следующих состояниях:

  • pinned — элемент видим, закреплён на экране.
  • unpinned — элемент скрыт, убран за пределы видимой области.
  • top — пользователь находится в начале страницы.
  • notTop — пользователь покинул верх страницы.
  • bottom — пользователь дошёл до низа страницы.
  • notBottom — пользователь покинул нижнюю границу страницы.

Эти состояния автоматически добавляются к элементу в виде CSS-классов, что позволяет задавать собственные анимации через CSS.

Инициализация и базовые параметры

Для начала работы с Headroom.js необходимо подключить скрипт и создать экземпляр, указывая элемент, который будет управляться:

const header = document.querySelector('header');
const headroom = new Headroom(header, {
  tolerance: {
    up: 5,
    down: 5
  },
  offset: 100,
  classes: {
    initial: 'headroom',
    pinned: 'headroom--pinned',
    unpinned: 'headroom--unpinned',
    top: 'headroom--top',
    notTop: 'headroom--not-top',
    bottom: 'headroom--bottom',
    notBottom: 'headroom--not-bottom'
  }
});
headroom.init();

Параметры:

  • tolerance — чувствительность к прокрутке. Можно задавать раздельно для движения вверх (up) и вниз (down).
  • offset — смещение в пикселях, после которого элемент начинает реагировать на прокрутку.
  • classes — объект, определяющий CSS-классы для разных состояний.

Настройка анимации через CSS

Headroom.js не задаёт анимацию напрямую, но добавляет классы к элементу. В сочетании с CSS-переходами или анимациями это позволяет реализовать плавное появление и скрытие элементов.

Пример сдвига шапки вверх при скрытии:

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

.headroom--unpinned {
  transform: translateY(-100%);
}

.headroom--pinned {
  transform: translateY(0);
}

В данном примере при добавлении класса headroom--unpinned шапка плавно смещается вверх, скрываясь из видимой области. Класс headroom--pinned возвращает её на экран.

Для плавного появления при прокрутке вверх:

  • Можно использовать transition: transform или transition: top.
  • Важно, чтобы элемент был фиксированным (position: fixed) для корректного визуального эффекта.

Настройка чувствительности и смещения

Tolerance задаёт минимальное смещение прокрутки для срабатывания события. Если задать маленькое значение, элемент будет реагировать на малейшее движение, создавая дерганую анимацию. Большое значение создаёт более стабильное поведение.

tolerance: {
  up: 10,   // элемент появляется только после прокрутки вверх на 10px
  down: 20  // элемент скрывается после прокрутки вниз на 20px
}

Offset определяет точку, после которой элемент начинает реагировать на скролл. Например, если offset: 150, элемент будет невидим в верхней части страницы и начнёт реагировать только после прокрутки 150px вниз.

Интеграция с дополнительными эффектами

Headroom.js совместим с любыми CSS-анимациями:

  • Opacity: плавное затухание или проявление элемента.
  • Scale: масштабирование для более выразительного эффекта.
  • Shadow: добавление тени при появлении, создавая ощущение “поднятого” элемента.

Пример с эффектом прозрачности и смещения:

.headroom {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.headroom--unpinned {
  transform: translateY(-100%);
  opacity: 0;
}

.headroom--pinned {
  transform: translateY(0);
  opacity: 1;
}

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

Обработка событий

Headroom.js поддерживает собственные события, что позволяет выполнять действия при изменении состояния:

headroom.on('pin', () => {
  console.log('Элемент появился');
});

headroom.on('unpin', () => {
  console.log('Элемент скрыт');
});

headroom.on('top', () => {
  console.log('Пользователь в начале страницы');
});

Это удобно для запуска анимаций вне CSS, изменения стилей JavaScript или взаимодействия с другими элементами страницы.

Оптимизация производительности

Headroom.js использует оптимизированный обработчик scroll с requestAnimationFrame, что минимизирует нагрузку на браузер. Для больших страниц важно:

  • Ограничивать количество анимируемых свойств (лучше transform и opacity).
  • Не применять сложные теневые эффекты с высокой частотой обновления.
  • Использовать will-change: transform для элементов с анимацией.

Примеры сложных эффектов

  1. Комбинированное смещение и тень:
header {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.headroom--unpinned {
  transform: translateY(-100%);
  box-shadow: none;
}

.headroom--pinned {
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
  1. Появление с масштабированием и прозрачностью:
.headroom--unpinned {
  transform: translateY(-50%) scale(0.95);
  opacity: 0;
}

.headroom--pinned {
  transform: translateY(0) scale(1);
  opacity: 1;
}
  1. Применение для боковых панелей или навигационных меню:

Headroom.js работает не только с верхней шапкой. Любой элемент с фиксированным или абсолютным позиционированием можно сделать динамически скрывающимся при прокрутке, создавая эффект «плавающего меню» или «плавающей панели инструментов».

Хотите, я могу подготовить следующую главу с реальными практическими примерами интеграции Headroom.js с современными фреймворками, такими как React и Vue, включая анимацию через CSS и JS? Это будет естественное продолжение темы анимации.

Оглавление