Портфолио с проектами

Для начала работы с Locomotive Scroll необходимо подключить библиотеку к проекту. Существует несколько способов: через npm/yarn или подключением через CDN.

Установка через npm:

npm install locomotive-scroll

Подключение через CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.css">
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.4/dist/locomotive-scroll.min.js"></script>

После подключения важно добавить контейнер с атрибутом data-scroll-container, внутри которого будут находиться все элементы, участвующие в плавной прокрутке.

<div data-scroll-container>
  <section data-scroll-section>
    <!-- Контент портфолио -->
  </section>
</div>

Инициализация скролла

Создание экземпляра Locomotive Scroll выполняется через конструктор LocomotiveScroll. Основные параметры:

  • el — элемент-контейнер для скролла.
  • smooth — включает плавный скролл.
  • getDirection — отслеживание направления прокрутки.
  • getSpeed — отслеживание скорости прокрутки.

Пример инициализации:

import LocomotiveScroll from "locomotive-scroll";

const scroll = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  getDirection: true,
  getSpeed: true
});

Основные атрибуты и их использование

data-scroll

Применяется к элементам, которые должны анимироваться или фиксироваться в момент прокрутки.

  • data-scroll-speed — скорость движения элемента относительно скролла. Значение 1 соответствует нормальной скорости, отрицательные значения создают эффект движения в обратную сторону.
  • data-scroll-delay — задержка анимации.
  • data-scroll-repeat — повтор анимации при повторном появлении элемента на экране.
  • data-scroll-position — позиция отслеживания элемента (top, bottom, middle).
<div data-scroll data-scroll-speed="2">
  Проект с ускоренным скроллом
</div>

data-scroll-section

Позволяет разделять контент на независимые секции, каждая из которых может иметь отдельные эффекты.

<section data-scroll-section>
  <h2 data-scroll data-scroll-speed="1.5">Проект 1</h2>
</section>
<section data-scroll-section>
  <h2 data-scroll data-scroll-speed="1.2">Проект 2</h2>
</section>

data-scroll-sticky

Фиксирует элемент на экране на протяжении определенной секции. Работает вместе с data-scroll-target, указывающим контейнер, относительно которого фиксировать элемент.

<div data-scroll data-scroll-sticky data-scroll-target="#portfolio">
  Фиксированная панель
</div>

Анимация элементов при прокрутке

Locomotive Scroll тесно интегрируется с CSS-анимациями и библиотеками типа GSAP. Основная идея — использование данных о скролле для триггера анимаций.

Пример плавного появления блока:

.fade-in {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

[data-scroll].is-inview .fade-in {
  opacity: 1;
  transform: translateY(0);
}

В JS добавляется обработка события:

scroll.on("call", (func, dir, el) => {
  if(func === "fade") {
    el.classList.add("is-inview");
  }
});

HTML с вызовом анимации:

<div data-scroll data-scroll-call="fade" class="fade-in">
  Контент проекта
</div>

Плавный скролл и параллакс эффекты

Одним из главных преимуществ Locomotive Scroll является легкое создание параллакса.

  • Горизонтальные и вертикальные смещения с помощью data-scroll-speed позволяют создать эффект глубины.
  • Задержка анимаций через data-scroll-delay позволяет синхронизировать появление элементов.

Пример параллакса заголовка:

<h2 data-scroll data-scroll-speed="-1.5">Проект с эффектом параллакса</h2>

Адаптация под мобильные устройства

Locomotive Scroll поддерживает мобильные устройства, но важно корректно обрабатывать тач-прокрутку. Для этого можно использовать параметр smartphone: { smooth: true } и tablet: { smooth: true }.

const scroll = new LocomotiveScroll({
  el: document.querySelector("[data-scroll-container]"),
  smooth: true,
  smartphone: {
    smooth: true
  },
  tablet: {
    smooth: true
  }
});

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

  • Минимизировать количество одновременно анимируемых элементов.
  • Использовать data-scroll-repeat="false" для одноразовых эффектов.
  • Разделять длинные страницы на секции с data-scroll-section.
  • Предварительно загружать тяжелые изображения и медиа-контент для уменьшения задержек.

Интеграция с портфолио-проектами

В портфолио Locomotive Scroll помогает:

  • Создавать уникальные эффекты появления проектов.
  • Фиксировать навигационные панели и фильтры проектов.
  • Реализовать горизонтальные скроллы для галерей.
  • Создавать плавный параллакс для заголовков и иллюстраций.

Пример горизонтальной галереи:

<div data-scroll-section>
  <div class="horizontal-gallery" data-scroll data-scroll-direction="horizontal">
    <img src="project1.jpg" alt="Проект 1">
    <img src="project2.jpg" alt="Проект 2">
    <img src="project3.jpg" alt="Проект 3">
  </div>
</div>

С помощью CSS и JS можно синхронизировать движение галереи с вертикальным скроллом для создания эффекта горизонтального пролистывания.

Эта структура позволяет построить динамичное и современное портфолио, где каждый проект получает визуальное выделение и интерактивность, а пользователи ощущают плавность и глубину прокрутки.

Оглавление