Создание первого waypoint

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

  1. Через CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js"></script>
  1. Через npm:
npm install waypoints

После установки можно подключить библиотеку в проект через модульную систему:

import Waypoint from 'waypoints/lib/noframework.waypoints';

Важно убедиться, что скрипт подключен после элементов DOM, к которым будут привязываться Waypoints.

Создание базового Waypoint

Чтобы создать первый Waypoint, необходимо выбрать элемент DOM, за которым будет вестись наблюдение, и определить функцию, которая будет вызвана при достижении этого элемента. Простейший пример:

<div id="section1" style="margin-top:1000px;">Секция 1</div>

<script>
  var waypoint = new Waypoint({
    element: document.getElementById('section1'),
    handler: function(direction) {
      console.log('Waypoint достигнут! Направление:', direction);
    }
  });
</script>

Пояснение ключевых параметров

  • element — обязательный параметр, указывающий на DOM-элемент, за которым нужно следить.

  • handler — функция обратного вызова, выполняемая при пересечении элемента с границей viewport. Она принимает один аргумент:

    • direction — строка "down" или "up", указывающая направление прокрутки, при котором waypoint активировался.

Настройка offset

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

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    console.log('Waypoint достигнут с offset!');
  },
  offset: '50%'  // срабатывание, когда элемент проходит середину экрана
});

Особенности использования offset:

  • Значение в процентах ('50%') привязывается к высоте viewport.
  • Можно использовать пиксели (100) — waypoint сработает, когда верх элемента окажется на 100px от верхней границы окна.
  • Отрицательные значения допустимы, что позволяет срабатывать waypoint раньше, чем элемент появляется в видимой области.

Направления срабатывания

Waypoints различает два направления:

  1. down — скролл вниз, когда элемент появляется сверху.
  2. up — скролл вверх, когда элемент снова пересекает точку срабатывания.

Пример с проверкой направления:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function(direction) {
    if (direction === 'down') {
      console.log('Прокрутка вниз достигла секции');
    } else if (direction === 'up') {
      console.log('Прокрутка вверх достигла секции');
    }
  },
  offset: '25%'
});

Управление waypoint после создания

Waypoints предоставляет методы для управления уже созданными waypoint-ами:

  • waypoint.destroy() — удаляет waypoint и прекращает его отслеживание.
  • waypoint.disable() — временно отключает waypoint без удаления.
  • waypoint.enable() — повторно активирует отключённый waypoint.
  • waypoint.trigger(direction) — вручную инициирует срабатывание waypoint, можно указать направление ("down" или "up").

Пример:

var waypoint = new Waypoint({
  element: document.getElementById('section1'),
  handler: function() { console.log('Сработало!'); }
});

// Отключение на время
waypoint.disable();

// Включение обратно
waypoint.enable();

// Принудительное срабатывание
waypoint.trigger('down');

// Полное удаление waypoint
waypoint.destroy();

Использование Waypoints с динамическим контентом

Если элементы добавляются динамически через JavaScript или AJAX, нужно создавать waypoint после добавления элемента в DOM. Для динамических списков можно использовать цикл или делегирование создания waypoint-ов:

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

sections.forEach(function(section) {
  new Waypoint({
    element: section,
    handler: function() {
      section.classList.add('visible');
    },
    offset: '75%'
  });
});

Взаимодействие с CSS-анимациями

Waypoint часто применяется для запуска анимаций при прокрутке. В примере ниже элемент плавно появляется при достижении его зоны:

.dynamic-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.dynamic-section.visible {
  opacity: 1;
  transform: translateY(0);
}
var waypoint = new Waypoint({
  element: document.querySelector('.dynamic-section'),
  handler: function() {
    this.element.classList.add('visible');
  },
  offset: '80%'
});

Группы Waypoints

Waypoints позволяют объединять несколько waypoint-ов в группы, чтобы управлять их срабатыванием синхронно. Это удобно для длинных страниц с несколькими секциями.

Waypoint.Group.add({
  name: 'sectionGroup',
  waypoints: [
    new Waypoint({ element: document.getElementById('section1'), handler: fn }),
    new Waypoint({ element: document.getElementById('section2'), handler: fn }),
  ]
});

Методы групп позволяют активировать или отключать сразу все waypoint-ы группы, что упрощает управление большим количеством событий на странице.

Оглавление