Событие call

Событие call в библиотеке Locomotive Scroll является одним из ключевых инструментов для синхронизации анимаций и функционала с положением скролла. Оно позволяет вызывать пользовательские функции в определённой точке прокрутки страницы, обеспечивая полный контроль над интерактивными эффектами.

Инициализация и структура события

Для начала необходимо убедиться, что объект скролла создан правильно:

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('#main-container'),
  smooth: true,
  multiplier: 1.2,
});

Событие call не требует отдельного объявления в настройках и регистрируется через метод on объекта scroll.

scroll.on('call', (func, direction, obj) => {
  console.log(func);       // имя функции или метка
  console.log(direction);  // направление скролла: "up" или "down"
  console.log(obj);        // элемент DOM, к которому привязана метка
});

Параметры:

  • func – строка или массив строк, определяющая функцию или метку, привязанную к элементу с атрибутом data-scroll-call.
  • direction – направление движения скролла: "up" при прокрутке вверх и "down" при прокрутке вниз.
  • obj – объект, содержащий ссылку на DOM-элемент (el) и дополнительные данные.

Привязка меток к элементам

Для активации события call необходимо использовать атрибут data-scroll-call у элемента, который должен вызывать функцию:

<section data-scroll-call="animateSection" data-scroll-repeat>
  Контент секции
</section>

Ключевые моменты:

  • Атрибут data-scroll-call задаёт имя функции или метки.
  • Атрибут data-scroll-repeat делает срабатывание события многократным при повторной прокрутке через элемент.
  • Если data-scroll-call содержит массив имён через запятую, все функции будут вызваны одновременно.

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

scroll.on('call', (func, direction, obj) => {
  if(func === 'animateSection' && direction === 'down') {
    obj.el.classList.add('section-active');
  } else if(func === 'animateSection' && direction === 'up') {
    obj.el.classList.remove('section-active');
  }
});

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

Использование дополнительных данных

Дополнительно можно передавать кастомные параметры через атрибут data-scroll-call или отдельный data-* атрибут:

<section data-scroll-call="animateSection" data-color="red">
  Контент секции
</section>
scroll.on('call', (func, direction, obj) => {
  if(func === 'animateSection') {
    const color = obj.el.dataset.color;
    obj.el.style.backgroundColor = color;
  }
});

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

Работа с массивом функций

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

<section data-scroll-call="fadeIn,logScroll" data-scroll-repeat>
  Контент секции
</section>
scroll.on('call', (func, direction, obj) => {
  switch(func) {
    case 'fadeIn':
      obj.el.classList.add('fade-in');
      break;
    case 'logScroll':
      console.log('Элемент прошёл точку скролла', obj.el);
      break;
  }
});

Особенности поведения

  • Однократное срабатывание: по умолчанию событие вызывается один раз при прохождении элемента.
  • Многократное срабатывание: активируется через data-scroll-repeat.
  • Направление скролла: позволяет создавать разные эффекты при движении вверх и вниз.
  • Доступ к DOM-элементу: obj.el даёт прямой доступ к элементу для манипуляций.

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

  1. Анимация появления контента: добавление классов CSS при прокрутке для плавного появления.
  2. Логирование или трекинг: использование события для аналитики и отслеживания взаимодействий пользователя.
  3. Изменение стилей или контента: динамическая подстройка стилей элементов в зависимости от позиции скролла.
  4. Связка с другими библиотеками: интеграция с GSAP или другими анимационными библиотеками для сложных сцен.

Событие call в Locomotive Scroll предоставляет гибкий и мощный способ связывать положение скролла с действиями на странице, позволяя создавать интерактивные и динамичные интерфейсы с минимальными затратами кода.

Оглавление