Lenis Smooth Scroll & Parallax Effect – AI Code Prompt
CODE PREVIEW
Prompt
Create a smooth scrolling implementation using Lenis with parallax effects on images and text. Include a progress indicator and scroll-triggered animations.
この実装は、Lenisを使用したスムーズスクロールとパララックス効果をデモンストレーションします。ページの特徴:
- Lenisライブラリによる60fpsのスムーズスクロール
- カスタマイズ可能なスクロール速度とイージング
- 画像とテキスト要素へのパララックス効果
- リアルタイムスクロール進捗インジケーター
- スクロールトリガーによるカードアニメーション
- will-changeプロパティによるパフォーマンス最適化
- CSS Gridを使用したレスポンシブデザイン
- グラデーションプログレスバーによる視覚的フィードバック
Lenisは、アクセシビリティとブラウザ互換性を維持しながら、ネイティブのようなスクロール体験を提供します。パララックス効果は、スクロール位置と要素の速度属性に基づいて計算されます。
Prompt Overview
This prompt is designed for frontend developers who want to implement polished, modern scroll experiences using the Lenis smooth scroll library. It requests a complete working implementation that combines smooth inertia-based scrolling with parallax effects applied to both images and text elements, a visible scroll progress indicator, and scroll-triggered animations — all common requirements in high-end web design projects.
Use this prompt when building portfolio sites, agency landing pages, or any interface where user experience and visual storytelling matter. It works best with AI coding assistants such as GitHub Copilot, ChatGPT with code interpreter, or Claude, and pairs well with vanilla JavaScript or frameworks like Next.js. To customize the output, try adjusting parameters like parallax intensity, easing curves, or animation timing — or specify a particular UI section, such as a hero banner or a feature card grid, to focus the generated code on a real component in your project.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選