风格目录/全屏滚动布局

全屏滚动布局

Full Page Scroll

每一屏占满整个视口的沉浸式滚动体验，通过滚动切换完整场景，适合品牌故事、产品介绍、作品集展示。

全屏滚动沉浸式场景品牌故事

查看完整 Showcase →

配色方案

Primary

#000000

Secondary

#ffffff

Accent 1

#6366f1

Accent 2

#ec4899

Accent 3

#14b8a6

Accent 4

#f59e0b

Quick Start

3 步开始使用 AI 生成

复制 AI Rules

粘贴到你的 AI 工具

• Cursor → 粘贴到 .cursorrules 文件

• Claude Code → 粘贴到 CLAUDE.md 文件

• Trae → 粘贴到 trae-rules.md 文件

开始生成

尝试："用全屏滚动布局风格生成一个着陆页"

设计哲学

Full Page Scroll（全屏滚动布局）是一种将每个内容区块扩展到整个视口的布局方式，创造电影般的叙事体验。

核心理念： - 沉浸体验：每一屏都是完整的视觉场景 - 叙事节奏：滚动即翻页，控制信息节奏 - 焦点集中：一次只展示一个核心信息 - 记忆深刻：场景化展示更易被记住

必须做 / Do's

+每个 section 设置 min-h-screen 或 h-screen
+使用 scroll-snap 实现平滑吸附 scroll-snap-type: y mandatory
+每屏内容垂直水平居中 flex items-center justify-center
+添加滚动指示器和页面导航点
+使用 CSS scroll-behavior: smooth
+考虑添加进入/离开动画
+提供跳过或快速导航选项

禁止做 / Don'ts

-禁止内容超出单屏视口（需要滚动才能看完）
-禁止没有滚动提示（用户可能不知道往下滚）
-禁止动画过于复杂导致性能问题
-禁止锁定滚动时间过长
-禁止忽略移动端体验

组件模板

组件预览

滚动提示按钮

引导用户滚动的按钮

tsx

<button className="
  absolute bottom-8 left-1/2 -translate-x-1/2
  flex flex-col items-center gap-2
  text-white/70 hover:text-white
  transition-colors
  animate-bounce
">
  <span className="text-sm uppercase tracking-widest">Scroll</span>
  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
  </svg>
</button>

全局样式

Global CSS

css

/* Full Page Scroll Global Styles */

/* Main container with snap scroll */
.fullpage-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Each section */
.fullpage-section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scroll indicator animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(10px) translateX(-50%);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

/* Navigation dots */
.fullpage-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fullpage-nav-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s, transform 0.3s;
}

.fullpage-nav-dot:hover,
.fullpage-nav-dot.active {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* Section entrance animations */
.fullpage-section [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fullpage-section.in-view [data-animate] {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.fullpage-section.in-view [data-animate]:nth-child(1) { transition-delay: 0.1s; }
.fullpage-section.in-view [data-animate]:nth-child(2) { transition-delay: 0.2s; }
.fullpage-section.in-view [data-animate]:nth-child(3) { transition-delay: 0.3s; }
.fullpage-section.in-view [data-animate]:nth-child(4) { transition-delay: 0.4s; }

快速开始

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成全屏滚动布局风格的界面。

品牌故事页

讲述品牌历史的全屏滚动

Create a brand story page with full page scroll:
1. Container with scroll-snap-type: y mandatory
2. 5 sections, each min-h-screen with different gradient backgrounds
3. Section 1: Hero with brand name and tagline
4. Sections 2-4: Timeline moments with year, title, description
5. Section 5: CTA to explore more
6. Fixed navigation dots on right side
7. Scroll indicator on first section
Content centered, smooth transitions between sections

产品特性展示

一屏一特性的产品介绍

Create a product features page with full page scroll:
1. 4 full-screen sections with scroll snap
2. Each section: feature icon, headline, description, visual
3. Alternating dark/light backgrounds
4. Section entrance animations (fade up)
5. Progress indicator showing current section
6. Final section with pricing CTA
7. Skip button to jump to end
Use bold typography, centered content

作品集展示

每个项目一屏的作品集

Create a portfolio showcase with full page scroll:
1. Hero section with name and role
2. Each project in full-screen section
3. Project sections: large image, title, description, link
4. Different color schemes per project
5. Navigation dots with project names on hover
6. Final section with contact form
7. Smooth scroll between sections
Use dramatic visuals, minimal text

提示：复制时会自动附带该风格的设计规范

兼容的视觉风格

试试搭配

全屏滚动布局是一种布局模式，可以与以下视觉风格搭配使用。

Glass Card

毛玻璃透明效果

玻璃拟态

Glassmorphism

Gradient

现代渐变风格

现代渐变风

Modern Gradient

System

Cyberpunk

霓虹发光效果

赛博朋克霓虹

Cyberpunk Neon

Minimal

Flat Design

极简扁平风格

极简扁平风

Minimalist Flat

Bold

几何大胆风格

几何大胆风

Geometric Bold

Style Pack

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

导出

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照全屏滚动布局风格生成代码。

You are a frontend expert specializing in Full Page Scroll layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT let content overflow beyond viewport height
- Do NOT omit scroll indicators
- Do NOT use heavy animations that hurt performance
- Do NOT lock scroll for too long
- Do NOT ignore mobile experience

## Must Follow

- Container: h-screen overflow-y-auto scroll-snap-type: y mandatory
- Sections: min-h-screen snap-start
- Content: centered with flex items-center justify-center
- Navigation: fixed dots on side
- Scroll indicator: at bottom of first section
- Smooth scrolling: scroll-behavior: smooth

## Section Structure

Each section:
- min-h-screen (full viewport height)
- snap-start (snap to section start)
- Content centered both ways
- Distinct background color/gradient
- Number indicator (01, 02, etc.)

## Navigation

Side dots:
- Fixed position on right side
- Vertical center aligned
- Click to scroll to section
- Active state indication

Scroll indicator:
- Bottom of first section
- Animated (bounce)
- Arrow down icon

## Responsive

Mobile:
- Same full-screen sections
- Navigation dots may hide or move
- Touch scroll friendly

Desktop:
- Full experience with all elements
- Keyboard navigation support

## Self-Check

After generating code, verify:
1. All sections are exactly viewport height
2. Scroll snapping works correctly
3. Navigation dots present
4. Scroll indicator visible
5. Content doesn't overflow

组件预览

滚动提示按钮

引导用户滚动的按钮

tsx

<button className="
  absolute bottom-8 left-1/2 -translate-x-1/2
  flex flex-col items-center gap-2
  text-white/70 hover:text-white
  transition-colors
  animate-bounce
">
  <span className="text-sm uppercase tracking-widest">Scroll</span>
  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
  </svg>
</button>

Global CSS

css

/* Full Page Scroll Global Styles */

/* Main container with snap scroll */
.fullpage-container {
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Each section */
.fullpage-section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Scroll indicator animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(10px) translateX(-50%);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

/* Navigation dots */
.fullpage-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fullpage-nav-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: background 0.3s, transform 0.3s;
}

.fullpage-nav-dot:hover,
.fullpage-nav-dot.active {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.2);
}

/* Section entrance animations */
.fullpage-section [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fullpage-section.in-view [data-animate] {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children animations */
.fullpage-section.in-view [data-animate]:nth-child(1) { transition-delay: 0.1s; }
.fullpage-section.in-view [data-animate]:nth-child(2) { transition-delay: 0.2s; }
.fullpage-section.in-view [data-animate]:nth-child(3) { transition-delay: 0.3s; }
.fullpage-section.in-view [data-animate]:nth-child(4) { transition-delay: 0.4s; }

示例 Prompts

复制这些经过验证的 Prompt，快速开始用 AI 生成全屏滚动布局风格的界面。

品牌故事页

讲述品牌历史的全屏滚动

Create a brand story page with full page scroll:
1. Container with scroll-snap-type: y mandatory
2. 5 sections, each min-h-screen with different gradient backgrounds
3. Section 1: Hero with brand name and tagline
4. Sections 2-4: Timeline moments with year, title, description
5. Section 5: CTA to explore more
6. Fixed navigation dots on right side
7. Scroll indicator on first section
Content centered, smooth transitions between sections

产品特性展示

一屏一特性的产品介绍

Create a product features page with full page scroll:
1. 4 full-screen sections with scroll snap
2. Each section: feature icon, headline, description, visual
3. Alternating dark/light backgrounds
4. Section entrance animations (fade up)
5. Progress indicator showing current section
6. Final section with pricing CTA
7. Skip button to jump to end
Use bold typography, centered content

作品集展示

每个项目一屏的作品集

Create a portfolio showcase with full page scroll:
1. Hero section with name and role
2. Each project in full-screen section
3. Project sections: large image, title, description, link
4. Different color schemes per project
5. Navigation dots with project names on hover
6. Final section with contact form
7. Smooth scroll between sections
Use dramatic visuals, minimal text

提示：复制时会自动附带该风格的设计规范

导出风格包

获取完整的可机器读取风格资源，包括 Design Tokens、Tailwind 预设、CSS 变量和 shadcn/ui 主题。

Design Tokens

Figma / Style Dictionary / Tokens Studio 兼容

Tailwind Preset

Tailwind CSS 主题预设，可直接在配置中引用

Global CSS

包含 CSS 变量和基础样式

shadcn Theme

shadcn/ui 主题配置

CSS Variables

纯 CSS 变量，适用于任何项目

SKILL.md

可加载到 Cursor / Claude Code / VS Code 的技能包

AI Rules

将以下规则导出并添加到你的 AI 编码助手中，让它按照全屏滚动布局风格生成代码。

You are a frontend expert specializing in Full Page Scroll layout. All generated code must strictly follow these constraints:

## Absolute Prohibitions

- Do NOT let content overflow beyond viewport height
- Do NOT omit scroll indicators
- Do NOT use heavy animations that hurt performance
- Do NOT lock scroll for too long
- Do NOT ignore mobile experience

## Must Follow

- Container: h-screen overflow-y-auto scroll-snap-type: y mandatory
- Sections: min-h-screen snap-start
- Content: centered with flex items-center justify-center
- Navigation: fixed dots on side
- Scroll indicator: at bottom of first section
- Smooth scrolling: scroll-behavior: smooth

## Section Structure

Each section:
- min-h-screen (full viewport height)
- snap-start (snap to section start)
- Content centered both ways
- Distinct background color/gradient
- Number indicator (01, 02, etc.)

## Navigation

Side dots:
- Fixed position on right side
- Vertical center aligned
- Click to scroll to section
- Active state indication

Scroll indicator:
- Bottom of first section
- Animated (bounce)
- Arrow down icon

## Responsive

Mobile:
- Same full-screen sections
- Navigation dots may hide or move
- Touch scroll friendly

Desktop:
- Full experience with all elements
- Keyboard navigation support

## Self-Check

After generating code, verify:
1. All sections are exactly viewport height
2. Scroll snapping works correctly
3. Navigation dots present
4. Scroll indicator visible
5. Content doesn't overflow