HTML-разметка для скролла

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


  

    
Заголовок первого блока

    
Текст первого блока с эффектом параллакса.

  


  

    
Заголовок второго блока

    
Текст второго блока.
  • data-scroll-container — атрибут, обозначающий главный контейнер скролла. Все элементы, которые будут участвовать в анимациях или отслеживаться, должны находиться внутри этого контейнера.
  • data-scroll-section — раздел, который Locomotive Scroll использует для определения границ секции и работы эффектов при входе/выходе.
  • data-scroll — атрибут для отдельных элементов, на которые будут применяться эффекты параллакса или другие скролл-анимации.
  • data-scroll-speed — параметр, задающий скорость движения элемента относительно стандартного скролла. Положительные значения ускоряют движение, отрицательные — замедляют.

Вложенность элементов

Вложенные элементы могут иметь свои настройки скорости и направления. Важно учитывать, что скорость наследуется локально, и элементы с разными data-scroll-speed создают эффект глубины. Пример вложенности:


  

    
Верхний слой

    

      Нижний слой с медленным параллаксом
  • Элементы с разными значениями data-scroll-speed создают ощущение многослойного параллакса.
  • Контейнеры без data-scroll также можно использовать для группировки элементов, но эффекты будут применяться только к вложенным блокам с атрибутами.

Фиксированные и sticky элементы

Для реализации фиксированных или липких элементов Locomotive Scroll использует атрибуты:


  Липкий элемент
  • data-scroll-sticky — делает элемент липким в пределах заданного контейнера.
  • data-scroll-target — задаёт контейнер, в пределах которого элемент будет «прилипать». Без указания целевого контейнера, sticky-элемент привязывается ко всему data-scroll-container.

Важные особенности HTML-структуры

  1. Один главный контейнер скролла — все эффекты работают только внутри него.
  2. Чёткая секционированная разметка — каждый блок с эффектами должен быть внутри data-scroll-section.
  3. Атрибуты для каждого элемента — Locomotive Scroll полагается на data-scroll для отслеживания положения и применения анимаций.
  4. Наследование и локальный контекст — вложенные блоки с разными скоростями создают сложные эффекты параллакса, поэтому важно продумывать иерархию.
  5. Sticky-элементы требуют target-контейнера — иначе поведение будет некорректным.

Примеры расширенной структуры


  

    
Главный заголовок

    
Текст с лёгким параллаксом.

    

      Элемент, движущийся медленнее скролла
    

  


  

    
Заголовок второго блока

    
Параллаксный текст

    

      Липкий элемент в этом блоке

Эта структура является универсальной для большинства задач с Locomotive Scroll, обеспечивая корректную работу параллакса, sticky-элементов и отслеживания скролла в сложных интерфейсах.

Оглавление