Lenisで作るスムーススクロール＋視差効果LPのプロンプト作例

この実装では、Lenisライブラリを使用したスムーズなスクロール体験とパララックス効果を組み合わせています。4つのフルスクリーンセクションがあり、各セクションの背景画像が前景のコンテンツとは異なる速度で動くことで、奥行きの錯覚を生み出します。

上部に固定されたナビゲーションメニューは、スクロールに応じて現在のセクションを自動的にハイライトし、メニュー項目をクリックするとそのセクションまでスムーズにスクロールします。各セクションではCSS transformを使用してパララックス効果を実現しており、背景画像がコンテンツよりも遅く動くことで3D感を高めています。

Lenisライブラリは設定可能なイージングと期間でバターのように滑らかなスクロールを提供し、パララックス効果は各セクションのスクロール位置に基づいて計算されます。この実装はレスポンシブで、デスクトップとモバイルデバイスの両方で良好に動作します。