# locomotive-scroll

Скилл помогает внедрить Locomotive Scroll: плавную прокрутку, параллакс и анимации от скролла. Нужен при сборке страниц с отслеживанием элементов во вьюпорте.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2500 установок · ★ 1133
- Автор: freshtechbro
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/locomotive-scroll/SKILL.md
- Обновлён: 2025-11-20
- HTML: https://affpapa.org/nevibecode/skills/locomotive-scroll

## Что делает

Скилл описывает подключение Locomotive Scroll через `npm`, настройку контейнера `data-scroll-container` и секций `data-scroll-section`. Он подсказывает, как включить плавную прокрутку, отслеживать появление элементов, задавать классы видимости и реагировать на события прокрутки.

Для параллакса используются `data-scroll-speed` и `data-scroll-direction`, для закреплённых блоков — `data-scroll-sticky` и `data-scroll-target`. Есть сценарии программной прокрутки через `scrollTo`, обработки событий `scroll` и `call`, а также интеграции с GSAP ScrollTrigger. Скилл затрагивает горизонтальную прокрутку.

Перехват прокрутки может ухудшить доступность, а на слабых устройствах даёт дополнительную нагрузку, поэтому стоит предусмотреть отключение эффекта и проверить мобильное управление. Фиксированное позиционирование потребует обходных решений.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/locomotive-scroll/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/locomotive-scroll/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/locomotive-scroll/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/locomotive-scroll/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install freshtechbro/claudedesignskills locomotive-scroll
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/locomotive-scroll/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/freshtechbro/claudedesignskills --path plugins/bundles/extended-3d-scroll/skills/locomotive-scroll
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/locomotive-scroll/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add freshtechbro/claudedesignskills --skill locomotive-scroll -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/freshtechbro/claudedesignskills/tree/HEAD/plugins/bundles/extended-3d-scroll/skills/locomotive-scroll/SKILL.md

## Когда брать
- подключить Locomotive Scroll в проект
- настроить параллакс через `data-scroll-speed`
- запускать анимации при входе элемента во вьюпорт
- закрепить блок в границах секции
- прокрутить страницу к элементу через `scrollTo`

## Примеры запросов агенту
- «Подключи Locomotive Scroll и настрой `data-scroll-container` для этой страницы»
- «Сделай параллакс у блока с `data-scroll-speed` и горизонтальным направлением»
- «Добавь обработчик `scroll` для анимации секции `hero` и свяжи его с GSAP ScrollTrigger»

## Похожие
- [scroll-experience](https://affpapa.org/nevibecode/skills/sickn33-scroll-experience.md) — скилл · 2000 установок
- [gsap-framer-scroll-animation](https://affpapa.org/nevibecode/skills/gsap-framer-scroll-animation.md) — скилл · 3900 установок
- [build-awwwards-quality-sites](https://affpapa.org/nevibecode/skills/build-awwwards-quality-sites.md) — скилл · 3100 установок
- [scroll-world](https://affpapa.org/nevibecode/skills/scroll-world.md) — скилл · 4800 установок
- [build-threejs-scroll-worlds](https://affpapa.org/nevibecode/skills/build-threejs-scroll-worlds.md) — скилл · 1500 установок
- [scrollytelling-and-parallax-data-visualization](https://affpapa.org/nevibecode/skills/scrollytelling-and-parallax-data-visualization.md) — скилл · 13 установок

Из того же набора: [freshtechbro/claudedesignskills](https://affpapa.org/nevibecode/by/freshtechbro/claudedesignskills.md) — 22 карточки

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md