tablet и smartphone

Locomotive Scroll предоставляет возможность плавного скролла с параллакс-эффектами и различными триггерами анимаций. На планшетах и смартфонах важна оптимизация производительности, так как рендеринг heavy-effects может вызвать лаги. Основной подход заключается в использовании адаптивной инициализации с проверкой размера экрана.

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  smartphone: {
    smooth: true,  // включение плавного скролла на смартфонах
    breakpoint: 768 // максимальная ширина экрана для смартфонов
  },
  tablet: {
    smooth: true,  // включение плавного скролла на планшетах
    breakpoint: 1024 // максимальная ширина экрана для планшетов
  }
});

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

  • smartphone.smooth и tablet.smooth управляют плавностью скролла на соответствующих устройствах.
  • breakpoint задаёт максимальную ширину экрана, при которой применяется конфигурация.
  • Можно отключить плавность для слабых устройств, установив smooth: false.

Адаптивное поведение скролла

Для планшетов и смартфонов часто требуется уменьшение нагрузки на анимации и отключение некоторых визуальных эффектов. Locomotive Scroll позволяет настраивать поведение элементов через data-атрибуты:

<section data-scroll-section>
  <div data-scroll data-scroll-speed="2">Параллакс элемент</div>
  <div data-scroll data-scroll-speed="0.5" data-scroll-mobile="0.2">Медленный параллакс на смартфоне</div>
</section>

Особенности:

  • data-scroll-mobile позволяет задать индивидуальную скорость параллакса для мобильных устройств.
  • data-scroll-speed действует на все устройства, если не переопределено для мобильной версии.
  • Можно использовать data-scroll-direction="horizontal" для горизонтального скролла только на планшетах.

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

На планшетах и смартфонах важно минимизировать количество одновременно анимируемых элементов. Рекомендации:

  1. Ограничить использование data-scroll-speed для тяжелых элементов.
  2. Использовать requestAnimationFrame для кастомных обработчиков скролла.
  3. Разбивать длинные страницы на несколько секций с data-scroll-section для частичной инициализации.
scroll.on('scroll', (args) => {
  requestAnimationFrame(() => {
    // Обновление состояния элементов только в рендер-цикле
  });
});

Управление breakpoint внутри JS

Locomotive Scroll предоставляет метод update(), который позволяет динамически менять поведение при изменении размеров экрана. Например, можно отключать плавный скролл при переходе с планшета на смартфон:

window.addEventListener('resize', () => {
  if(window.innerWidth <= 768) {
    scroll.update({smooth: false});
  } else {
    scroll.update({smooth: true});
  }
});

Пояснение:

  • Используется событие resize для отслеживания изменения ширины экрана.
  • scroll.update() перезапускает скролл с новыми настройками без полной переинициализации.

Работа с событиями скролла на мобильных устройствах

Для интерактивных эффектов важно различать устройства:

scroll.on('scroll', (instance) => {
  if(window.innerWidth <= 1024) {
    // Специальное поведение для планшетов и смартфонов
    const elements = document.querySelectorAll('[data-scroll-mobile]');
    elements.forEach(el => {
      const speed = el.getAttribute('data-scroll-mobile');
      el.style.transform = `translateY(${instance.scroll.y * speed}px)`;
    });
  }
});

Замечания:

  • instance.scroll.y содержит текущую позицию скролла.
  • Для мобильных устройств желательно уменьшать интенсивность трансформаций.
  • Можно комбинировать с data-scroll-repeat для повторяющихся анимаций при повторном скролле.

Использование горизонтального скролла на планшетах

Locomotive Scroll поддерживает горизонтальные секции, которые часто используются в планшетной версии сайта:

<section data-scroll-section data-scroll-direction="horizontal">
  <div data-scroll data-scroll-speed="1">Элемент 1</div>
  <div data-scroll data-scroll-speed="1.5">Элемент 2</div>
</section>
scroll.update();

Особенности:

  • Горизонтальный скролл лучше использовать только на планшетах, так как на смартфонах он снижает UX.
  • Для корректного рендеринга нужно убедиться, что контейнер имеет overflow: hidden и ширину, превышающую viewport.

Настройка триггеров анимаций на мобильных устройствах

Locomotive Scroll может запускать анимации при достижении определённых координат. Для планшетов и смартфонов можно задать специальные offset:

<div data-scroll data-scroll-offset="50%">Элемент с анимацией</div>
<div data-scroll data-scroll-offset-mobile="20%">Анимация для смартфонов</div>

Принцип работы:

  • data-scroll-offset задаёт процент появления элемента в viewport перед запуском анимации.
  • data-scroll-offset-mobile позволяет изменить точку срабатывания для меньших экранов.

Итоговые рекомендации по tablet и smartphone

  • Всегда использовать отдельные настройки для smartphone и tablet в конфиге.
  • Минимизировать количество heavy-параллаксов и анимаций на мобильных устройствах.
  • Использовать data-scroll-mobile и data-scroll-offset-mobile для тонкой настройки.
  • Применять scroll.update() при изменении размеров экрана, чтобы избежать лагов.
  • Горизонтальные секции и сложные параллаксы лучше ограничивать планшетами и десктопами.

Эти подходы обеспечивают плавность и стабильность скролла на всех устройствах без потери функционала и визуальной выразительности.

Оглавление