Концепция точек наблюдения

Waypoints — это библиотека для JavaScript, позволяющая отслеживать прокрутку страницы и запускать функции при достижении определённых элементов или координат. Основная идея строится на точках наблюдения (waypoints), которые фиксируют момент появления элемента в видимой области окна браузера и позволяют реагировать на это событие.

Создание точки наблюдения

Для создания точки наблюдения используется объект Waypoint. Его минимальная структура выглядит следующим образом:

var waypoint = new Waypoint({
  element: document.getElementById('example-element'),
  handler: function(direction) {
    console.log('Элемент достигнут! Направление: ' + direction);
  }
});

Ключевые параметры:

  • element — DOM-элемент, на котором будет срабатывать точка наблюдения.
  • handler — функция-обработчик события, получает аргумент direction, который может принимать значения 'down' или 'up'.
  • offset (опционально) — смещение от верхней границы окна браузера, при котором срабатывает waypoint. Может быть числом в пикселях или строкой с процентом, например '50%'.

Пример с использованием смещения:

var waypoint = new Waypoint({
  element: document.getElementById('example-element'),
  handler: function(direction) {
    console.log('50% элемента достигнуто!');
  },
  offset: '50%'
});

Направление прокрутки

Waypoints отслеживает направление движения страницы:

  • 'down' — пользователь скроллит вниз, элемент появляется в окне сверху.
  • 'up' — пользователь скроллит вверх, элемент возвращается в видимую область снизу.

Это позволяет создавать триггеры, зависящие от направления, например, анимации при прокрутке вниз и обратные анимации при прокрутке вверх:

var waypoint = new Waypoint({
  element: document.getElementById('section'),
  handler: function(direction) {
    if (direction === 'down') {
      this.element.classList.add('animate');
    } else {
      this.element.classList.remove('animate');
    }
  },
  offset: '75%'
});

Использование числового и процентного смещения

offset управляет точкой срабатывания. Возможные варианты:

  • Число в пикселях: offset: 100 — waypoint срабатывает, когда верх элемента находится на 100 пикселей ниже верхней границы окна.
  • Процент: offset: '50%' — waypoint срабатывает, когда элемент находится в середине окна.
  • Функция: offset: function() { return this.element.clientHeight / 2; } — динамическое вычисление смещения.

Такое разнообразие позволяет точно контролировать момент активации точки наблюдения.

Группы и управление waypoint-ами

Waypoints можно объединять в группы для массового управления. По умолчанию все точки наблюдения входят в группу 'default', но можно создавать свои:

var waypoint1 = new Waypoint({
  element: document.getElementById('first'),
  handler: function() {},
  group: 'animations'
});

var waypoint2 = new Waypoint({
  element: document.getElementById('second'),
  handler: function() {},
  group: 'animations'
});

// Обновление всех waypoint-ов группы
Waypoint.Group.findByName('animations').firstContext.refresh();

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

Контексты

Waypoints использует контексты (contexts) для отслеживания прокрутки в разных областях, не ограничиваясь основным окном:

  • По умолчанию контекст — window.
  • Можно задать любой скроллируемый контейнер:
var context = new Waypoint.Context(document.getElementById('scroll-container'));

var waypoint = new Waypoint({
  element: document.getElementById('inner-element'),
  handler: function() {},
  context: context
});

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

Методы управления waypoint-ами

Waypoints предоставляет методы для включения, отключения и уничтожения точек наблюдения:

  • waypoint.enable() — активирует waypoint.
  • waypoint.disable() — временно отключает waypoint.
  • waypoint.destroy() — удаляет waypoint и освобождает ресурсы.

Это важно при динамическом изменении DOM или условной активации анимаций.

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

var sections = document.querySelectorAll('.section');

sections.forEach(function(section) {
  new Waypoint({
    element: section,
    handler: function(direction) {
      section.classList.add('active');
      if (direction === 'up') {
        section.classList.remove('active');
      }
    },
    offset: '75%'
  });
});

Здесь каждая секция страницы получает waypoint с динамическим управлением классами в зависимости от направления прокрутки. Это основной паттерн для интерактивных скролл-эффектов.

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

Оглавление