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 扭曲效果
- 添加进度指示器
- 移动端改为水平拖拽