← 返回提示词
Landing

视差分层 Hero

多个图片/文字层以不同滚动速度移动的 hero 区域。

作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a hero section with parallax depth layers. Use a dark background with 3-4 abstract shape layers (gradients, blurred circles, or simple geometric forms) at different depths. As the user scrolls, the layers should move at different speeds—foreground faster, background slower. Place a bold headline and CTA in the center that stays relatively stable. Use CSS transform and scroll-driven animation or a lightweight JS scroll listener. Use Tailwind CSS. No real images; use CSS-generated shapes.
中文提示词
创建一个带视差深度层的 hero 区域。使用深色背景和 3-4 个抽象形状层(渐变、模糊圆形或简单几何形状)位于不同深度。用户滚动时,各层以不同速度移动——前景更快、背景更慢。在中央放置相对稳定的粗体标题和 CTA。使用 CSS transform 和滚动驱动动画或轻量 JS 滚动监听。使用 Tailwind CSS。不使用真实图片,使用 CSS 生成的形状。
视差分层 Hero screenshot 1
## Overview 通过视差创造空间深度的分层 hero。常见于高端作品集和产品发布页。 ## Features - 3-4 个深度层 - 每层不同滚动速度 - CSS 生成抽象形状 - 居中稳定标题 - 深色背景 - 滚动驱动动效 ## Usage 适用于创意作品集、AI 产品发布或沉浸式落地页。 ## Customization 修改 prompt 以: - 添加鼠标移动视差偏移 - 使用渐变网格替代形状 - 添加微妙颗粒纹理叠加 - 让文字也轻微视差移动