Layout
水平滚动画廊
水平滚动画廊区域,卡片以不同视差速度移动。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a horizontally scrolling gallery section. As the user scrolls vertically, the content should translate horizontally, revealing a series of tall portrait cards with images and captions. Use CSS sticky positioning and transform based on scroll progress (no heavy animation libraries). Each card should have a slight rotation and overlapping layout for editorial depth. Use Tailwind CSS. The images can be placeholder divs with muted colors.
中文提示词
创建一个水平滚动画廊区域。用户垂直滚动时,内容水平移动,展示一系列带图片和标题的高竖版卡片。使用 CSS sticky 定位和基于滚动进度的 transform(不使用大型动画库)。每张卡片应有轻微旋转和重叠布局,营造编辑深度。使用 Tailwind CSS。图片可用柔和色彩的占位 div。

Overview
滚动驱动的水平画廊,打破典型落地页的垂直节奏。灵感来自编辑画册和获奖作品集网站。
Features
- 垂直滚动驱动水平移动
- sticky 容器
- 高竖版卡片
- 重叠、轻微旋转的布局
- 每张卡片含图片 + 标题
- CSS 滚动关联 transform
Usage
适用于作品集、案例研究、摄影网站或产品集合。
Customization
修改 prompt 以:
- 卡片进入中心时添加缩放动画
- 在图片上使用 WebGL 扭曲效果
- 添加进度指示器
- 移动端改为水平拖拽