·locomotive-scroll
</>

locomotive-scroll

視差効果、ビューポート検出、スクロール駆動アニメーションを備えた Locomotive Scroll スムーズ スクロール ライブラリの包括的なスキル。このスキルは、スムーズなスクロール エクスペリエンスの実装、視差効果の作成、スクロール トリガー アニメーションの構築、または没入型スクロール Web サイトの開発を行うときに使用します。ロコモーティブ スクロール、スムーズ スクロール、パララックス、スクロール検出、スクロール イベント、スティッキー エレメント、水平スクロール、または GSAP ScrollTrigger 統合に関連するタスクをトリガーします。 GSAP と統合して、高度なスクロール駆動アニメーションを実現します。

14インストール·1トレンド·@freshtechbro

インストール

$npx skills add https://github.com/freshtechbro/claudedesignskills --skill locomotive-scroll

locomotive-scroll のインストール方法

コマンドラインで locomotive-scroll AI スキルを開発環境にすばやくインストール

  1. ターミナルを開く: ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます
  2. インストールコマンドを実行: このコマンドをコピーして実行します: npx skills add https://github.com/freshtechbro/claudedesignskills --skill locomotive-scroll
  3. インストールを確認: インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソース: freshtechbro/claudedesignskills。

Comprehensive guide for implementing smooth scrolling, parallax effects, and scroll-driven animations using Locomotive Scroll.

Every Locomotive Scroll implementation requires specific data attributes:

| data-scroll | Enable detection | data-scroll | | data-scroll-speed | Parallax speed | data-scroll-speed="2" | | data-scroll-direction | Parallax axis | data-scroll-direction="horizontal" | | data-scroll-sticky | Sticky positioning | data-scroll-sticky | | data-scroll-target | Sticky boundary | data-scroll-target="#section" |

視差効果、ビューポート検出、スクロール駆動アニメーションを備えた Locomotive Scroll スムーズ スクロール ライブラリの包括的なスキル。このスキルは、スムーズなスクロール エクスペリエンスの実装、視差効果の作成、スクロール トリガー アニメーションの構築、または没入型スクロール Web サイトの開発を行うときに使用します。ロコモーティブ スクロール、スムーズ スクロール、パララックス、スクロール検出、スクロール イベント、スティッキー エレメント、水平スクロール、または GSAP ScrollTrigger 統合に関連するタスクをトリガーします。 GSAP と統合して、高度なスクロール駆動アニメーションを実現します。 ソース: freshtechbro/claudedesignskills。

引用可能な情報

AI/検索での引用用の安定したフィールドとコマンド。

インストールコマンド
npx skills add https://github.com/freshtechbro/claudedesignskills --skill locomotive-scroll
カテゴリ
</>開発ツール
認証済み
初回登録
2026-03-09
更新日
2026-03-10

Browse more skills from freshtechbro/claudedesignskills

クイックアンサー

locomotive-scroll とは?

視差効果、ビューポート検出、スクロール駆動アニメーションを備えた Locomotive Scroll スムーズ スクロール ライブラリの包括的なスキル。このスキルは、スムーズなスクロール エクスペリエンスの実装、視差効果の作成、スクロール トリガー アニメーションの構築、または没入型スクロール Web サイトの開発を行うときに使用します。ロコモーティブ スクロール、スムーズ スクロール、パララックス、スクロール検出、スクロール イベント、スティッキー エレメント、水平スクロール、または GSAP ScrollTrigger 統合に関連するタスクをトリガーします。 GSAP と統合して、高度なスクロール駆動アニメーションを実現します。 ソース: freshtechbro/claudedesignskills。

locomotive-scroll のインストール方法は?

ターミナルまたはコマンドラインツール(Terminal、iTerm、Windows Terminal など)を開きます このコマンドをコピーして実行します: npx skills add https://github.com/freshtechbro/claudedesignskills --skill locomotive-scroll インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります

ソースリポジトリはどこですか?

https://github.com/freshtechbro/claudedesignskills