Scroll suave con Lenis y parallax: prompt IA + código
Prompt
Create a smooth scrolling implementation using Lenis with parallax effects on images and text. Include a progress indicator and scroll-triggered animations.
VISTA DE CÓDIGO
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
この実装は、Lenisを使用したスムーズスクロールとパララックス効果をデモンストレーションします。ページの特徴:
- Lenisライブラリによる60fpsのスムーズスクロール
- カスタマイズ可能なスクロール速度とイージング
- 画像とテキスト要素へのパララックス効果
- リアルタイムスクロール進捗インジケーター
- スクロールトリガーによるカードアニメーション
- will-changeプロパティによるパフォーマンス最適化
- CSS Gridを使用したレスポンシブデザイン
- グラデーションプログレスバーによる視覚的フィードバック
Lenisは、アクセシビリティとブラウザ互換性を維持しながら、ネイティブのようなスクロール体験を提供します。パララックス効果は、スクロール位置と要素の速度属性に基づいて計算されます。
Resumen del prompt
Este prompt está diseñado para generar una implementación completa de desplazamiento suave utilizando la biblioteca Lenis, combinada con efectos de paralaje en imágenes y textos. Es ideal para desarrolladores front-end que desean añadir una experiencia de navegación elegante y fluida a sus proyectos web, sin tener que construir desde cero toda la lógica de scroll personalizado. El resultado incluye un indicador de progreso de desplazamiento y animaciones activadas por scroll, elementos que elevan considerablemente la percepción visual de cualquier sitio.
Para mejores resultados, se recomienda usarlo con modelos de generación de código como GPT-4 o Claude 3, especificando el framework preferido (vanilla JS, React o Vue). Puedes variar el prompt añadiendo detalles como la intensidad del paralaje, la velocidad de Lenis, o secciones específicas donde aplicar las animaciones. Es especialmente útil en landing pages, portafolios creativos o sitios con mucho contenido visual donde la experiencia de navegación marca la diferencia frente a la competencia.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選