data-scroll-repeat

Атрибут data-scroll-repeat в Locomotive Scroll позволяет анимациям или эффектам повторно срабатывать при каждом входе элемента в область видимости. По умолчанию Locomotive Scroll активирует анимацию один раз при скролле, однако использование data-scroll-repeat даёт возможность возвращать элемент к исходному состоянию и запускать анимацию снова, если пользователь прокручивает страницу обратно.

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

  • Элемент должен быть видим в контейнере скролла.
  • После выхода элемента из области видимости его состояние сбрасывается.
  • При повторном появлении активируется та же анимация или триггер.
<div data-scroll data-scroll-repeat>
  Этот блок будет анимироваться каждый раз при скролле в видимую область.
</div>

Использование с data-scroll-class

Атрибут data-scroll-class часто применяется совместно с data-scroll-repeat для добавления CSS-классов при появлении элемента.

<div data-scroll data-scroll-class="is-visible" data-scroll-repeat>
  Этот блок будет получать класс "is-visible" каждый раз при входе в область видимости.
</div>

В этом случае:

  • Когда блок выходит за пределы видимости, класс удаляется.
  • Когда блок возвращается в область видимости, класс добавляется снова.
  • Позволяет создавать повторяющиеся эффекты без написания дополнительного JS-кода.

Пример с анимацией

<style>
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
</style>

<div data-scroll data-scroll-class="is-visible" data-scroll-repeat class="fade-in">
  Повторяющаяся анимация появления
</div>

При прокрутке:

  1. Элемент изначально скрыт (opacity 0, смещение по Y).
  2. При входе в область видимости добавляется класс is-visible.
  3. Анимация запускается.
  4. При выходе класса is-visible больше нет, элемент возвращается в исходное состояние.
  5. При повторном скролле анимация срабатывает снова.

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

  • data-scroll-speed: Если элемент с data-scroll-repeat имеет изменённую скорость скролла, повторные эффекты учитывают эту скорость.
  • data-scroll-delay: Можно задать задержку перед повторной активацией анимации.
  • data-scroll-target: Позволяет ограничивать эффект только определённой областью внутри контейнера.
<div data-scroll data-scroll-repeat data-scroll-speed="2">
  Элемент с ускоренным скроллом и повторяющейся анимацией
</div>

Ограничения и нюансы

  1. Производительность: Если на странице много элементов с data-scroll-repeat, это может повлиять на FPS, так как элементы постоянно проверяются при скролле.
  2. Начальное состояние: Необходимо заранее задавать CSS, чтобы элементы корректно возвращались в исходное положение.
  3. Совместимость с динамическим контентом: Если элементы добавляются через JS после инициализации Locomotive Scroll, необходимо вручную обновлять скролл через метод update().
scroll.update(); // Обновление после динамического добавления элементов

Комбинация с JavaScript

Можно программно отслеживать событие появления элемента с data-scroll-repeat через слушатель call:

<div data-scroll data-scroll-repeat data-scroll-call="repeatEvent">
  Пример с вызовом JS
</div>

<script>
  const scroll = new LocomotiveScroll({
    el: document.querySelector('[data-scroll-container]'),
    smooth: true
  });

  scroll.on('call', (func, way, obj) => {
    if(func === 'repeatEvent' && way === 'enter') {
      console.log('Элемент вошел в область видимости');
    }
  });
</script>
  • way может быть "enter" или "leave".
  • Это позволяет интегрировать data-scroll-repeat с кастомными JS-анимациями или событиями.

Советы по применению

  • Использовать data-scroll-repeat для повторяющихся интерактивных эффектов, таких как: fade, slide, масштабирование.
  • Не злоупотреблять на тяжелых страницах с множеством элементов — рекомендуется оптимизировать CSS-анимации через transform и opacity.
  • Проверять, чтобы элементы имели четко заданные размеры и начальные CSS-состояния, иначе повторная анимация может выглядеть некорректно.

data-scroll-repeat является мощным инструментом для создания динамичных, повторяющихся эффектов в Locomotive Scroll, позволяя оживить страницу без сложного JavaScript.

Оглавление