AIGPAIGP
Prompt LibraryAllProgrammingImage GenerationStable DiffusionVideo GenerationMusic GenerationDesign
Toolsサイト診断WebP ConverterImage ResizeFavicon Generator
Start with AIGeminiChatGPTClaudeDeepSeekCursorAntiGravity

GSAP ScrollTrigger - Pin Elements with Progress Animation

プログラミング
DeepSeek
P

Prompt

Create a GSAP ScrollTrigger animation that pins an element while it animates based on scroll progress. The element should be pinned for a specific scroll distance while its internal elements animate sequentially.

CODE PREVIEW

エディタを読み込み中…

AIとの対話に追加する一言

プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします

このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。

初心者なので、各行にコメントを追加して、何をしているか説明してください。

このコードをWordPressのテーマに組み込む方法も教えてください。

動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。

このチュートリアルでは、GSAP ScrollTriggerを使用して、スクロール進行度に基づいた順次アニメーションを持つピン留め要素を作成する方法を紹介します。ピン留めされたセクションは、ユーザーが特定の距離をスクロールする間固定され、3つのステップ要素が順番にアニメーションします。

主な機能:

  • 要素のピン留め: 中央セクションがビューポート高さの300%の間固定されます
  • 順次アニメーション: 3つのステップ要素がスクロールに応じて順番にアニメーションします
  • 進行度トラッキング: 上部のプログレスバーがピン留めセクションのスクロール進行度を表示します
  • スムーズな遷移: すべてのアニメーションはスムーズなイージングと適切なタイミングを使用します

動作の仕組み:

  1. ScrollTriggerが.pinned-section要素を特定のスクロール距離の間ピン留めします
  2. 各.step要素は、異なるスクロール位置でアクティブになる独自のScrollTriggerアニメーションを持っています
  3. プログレスバーはスクロール進行度に基づいてリアルタイムで更新されます
  4. ピン留めセクションが終了すると、通常のスクロールが再開され、最終アニメーションが実行されます

Prompt Overview

This tutorial demonstrates how to use GSAP ScrollTrigger to create a pinned element with sequential animations based on scroll progress. The pinned section remains fixed while the user scrolls through a specific distance, and three step elements animate in sequence.

Key Features:

  • Element Pinning: The middle section is pinned for 300% of the viewport height
  • Sequential Animations: Three step elements animate one after another as you scroll
  • Progress Tracking: A progress bar at the top shows scroll progress through the pinned section
  • Smooth Transitions: All animations use smooth easing and proper timing

How It Works:

  1. ScrollTrigger pins the .pinned-section element for a specific scroll distance
  2. Each .step element has its own ScrollTrigger animation that activates at different scroll positions
  3. The progress bar updates in real-time based on scroll progress
  4. When the pinned section ends, normal scrolling resumes with a final animation

Was this prompt helpful?

Comments

Comments appear after moderation

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Homeヘルプ