Layout Style · Parallax Sections

视差滚动

Parallax Sections

通过固定背景与滚动内容的层次错位，营造沉浸式深度感。每个全屏区块都是一个独立的视觉宇宙。

探索组件查看规范

0 JS

纯 CSS 视差

可配置区块

bg-fixed

核心 CSS 属性

向下滚动

设计哲学

深度即体验

视差滚动的核心原理：背景固定于视口，内容随页面流动。两层运动速度的差异产生了空间深度感 —— 就像透过火车窗户望向远山，近处的树飞速掠过，远处的山却几乎静止。

这种视觉物理原理无需 JavaScript，仅凭一行 CSS：background-attachment: fixed即可实现。每个区块成为独立的「场景」，叙事在滚动中展开。

深度层次沉浸体验节奏控制视觉焦点

核心设计原则

全屏场景每个 section 占满整个视口高度
固定背景bg-fixed 产生视差深度效果
半透明遮罩确保文字在任何背景上可读
渐变过渡区块之间以渐变色优雅衔接

配色系统

Primary

Blue

Sky

Light

White

核心特性

Three Pillars

Parallax Sections 构建在三个相互依存的设计原则上，共同构成沉浸式滚动体验。

Decoupled Depth

Background and foreground move at different rates. The eye perceives a three-dimensional space with zero JavaScript.

Decoupled Depth

Background and foreground move at different rates. The eye perceives a three-dimensional space with zero JavaScript.

Scene Rhythm

Full-screen sections pace the user's journey. Each scroll reveals a new emotional register — like chapters in a film.

Glass Clarity

Semi-transparent overlays and backdrop-blur keep text legible against any gradient, maintaining WCAG contrast ratios.

UI 组件

Components

按钮 Button

The Parallax View

Scroll to reveal layered storytelling. Foreground stays calm while background depth keeps moving.

bg-black/40 backdrop-blur-md · Glass Glare on hover

沉浸式滚动

全屏区块配合固定背景，营造如海浪涌动般的深度感知体验。

层叠视差

背景、内容、装饰三层以不同速率运动，仿佛身处立体空间之中。

玻璃形态

backdrop-blur 与半透明白色叠加，让内容卡片漂浮于渐变宇宙之上。

表单 Form · 玻璃输入

姓名

邮箱

留言

通知 Alerts

bg-fixed 是视差效果的核心，确保背景固定于视口。

移动端 iOS Safari 需使用 JS 降级方案。

渐变覆盖层保证文字对比度 WCAG AA 标准。

避免超过 6 个视差层级影响性能。

下拉菜单 Dropdown

标签 Tags

ParallaxCSSbg-fixedScrollImmersiveLayout

技术规范

Layout Specs

bg-fixed — The Core Trick

Tailwind's bg-fixed maps to background-attachment: fixed in CSS. The background gradient is positioned relative to the viewport. As the user scrolls, the element's content moves while the background stays put — producing the parallax illusion without any JavaScript.

<section
  className="relative min-h-screen
             bg-fixed bg-cover bg-center
             flex items-center"
  style={{
    backgroundImage:
      "linear-gradient(135deg, #0f172a, #1e3a5f)"
  }}
>
  <div className="absolute inset-0 bg-[#1e3a5f]/60" />
  <div className="relative z-10 max-w-4xl mx-auto px-6">
    {/* content */}
  </div>
</section>

Section Height

min-h-screen

Every section fills the full viewport height

Background Lock

bg-fixed

background-attachment: fixed — the parallax engine

Nav Z-Index

z-50

fixed + backdrop-blur-lg stays above all layers

Content Card

bg-white/90

+ backdrop-blur-sm rounded-2xl shadow-xl

Overlay Opacity

bg-[#1e3a5f]/55

absolute inset-0 — guarantees text contrast

Content Layer

relative z-10

Higher z-index than the overlay mask

动画节奏规范

Cinematic Slowness

duration-500 ~ 700

保持电影叙事节奏，避免急促感

Glass Glare

opacity 0 → 1 on hover

渐变扫光层模拟镜头反光效果

Decoupled Depth

blur + opacity only

前景避免大幅 Y 轴移动

视觉过渡

Section Transitions

区块之间的视觉切换是整个视差体验的关键节点。颜色故事的演变控制了情绪弧度。

本 Showcase 的渐变旅程

Section 1 — Hero

深夜蓝 · 宇宙开幕

Section 2 — Philosophy

皇室蓝 · 概念导入

Section 3 — Features

海洋蓝 · 深度展开

Section 4 — Components

暗板岩 · 技术聚焦

Section 5 — Specs

极夜蓝 · 规范锚定

Section 6 — Transitions

电蓝渐暗 · 过渡本身

Section 7 — Use Cases

深空蓝 · 场景收敛

Footer

接近黑 · 落幕

Hard Cut 直接切换

相邻 section 使用反差较大的渐变，比如深蓝切换到蓝绿，制造强烈的「翻页感」。每次切换都是一个情绪重置点。

Soft Fade 渐变连接

相邻 section 的结尾渐变色与下一个 section 的起始色保持 30% 的色相相近度，形成流动的视觉丝线。

适用场景

Use Cases

视差滚动最适合需要叙事节奏和情感深度的场景 —— 让每次滚动都成为一次发现。

Brand Story

Marketing

Walk visitors through a narrative arc — each section reveals a chapter as they scroll, with the background providing emotional context.

Product Showcase

E-commerce

Layer product imagery against fixed environments to simulate a studio shoot unfolding in motion.

Portfolio

Creative

Separate creative projects into full-screen scenes. Recruiters experience deliberate pacing rather than an overwhelming grid.

Landing Page

SaaS

Anchor sections become natural conversion points — the fixed background keeps branding visible while CTAs scroll into view.

Immersive Article

Publishing

Long-form editorial content stays engaging when each section change feels like turning a page in a richly illustrated book.

Event Microsite

Events

Countdown, schedule, and registration flow across depth layers, giving a sense of arrival at a physical venue.

设计规则

+必须遵循

—使用 bg-fixed 创造固定背景视差效果
—每个区块使用 min-h-screen 全屏高度
—内容区使用半透明背景 bg-white/90 增强可读性
—背景图片使用 bg-cover bg-center 保证比例
—统一使用较长缓动 duration-500/700 营造电影式节奏
—卡片可加入 Glass Glare 扫光层增强镜头反光感
—交互优先通过透明度和 blur 变化表达景深

-禁止事项

×禁止背景图片和内容对比度不足
×禁止区块高度不一致破坏节奏
×禁止过多视差层级造成性能问题
×禁止忽略移动端的视差降级处理
×禁止内容过于密集破坏焦点
×禁止卡片 hover 大幅上下跳动
×禁止短促急促动画，破坏沉浸叙事

订阅 StyleKit 更新

每周推送新增风格、技术笔记和设计案例。

Layout Style · Parallax Sections

视差滚动

Parallax Sections

通过固定背景与滚动内容的层次错位，营造沉浸式深度感。每个全屏区块都是一个独立的视觉宇宙。

探索组件查看规范

0 JS

纯 CSS 视差

可配置区块

bg-fixed

核心 CSS 属性

向下滚动

设计哲学

深度即体验

这种视觉物理原理无需 JavaScript，仅凭一行 CSS：background-attachment: fixed即可实现。每个区块成为独立的「场景」，叙事在滚动中展开。

深度层次沉浸体验节奏控制视觉焦点

核心设计原则

全屏场景每个 section 占满整个视口高度
固定背景bg-fixed 产生视差深度效果
半透明遮罩确保文字在任何背景上可读
渐变过渡区块之间以渐变色优雅衔接

配色系统

Primary

Blue

Sky

Light

White

核心特性

Three Pillars

Parallax Sections 构建在三个相互依存的设计原则上，共同构成沉浸式滚动体验。

Decoupled Depth

Background and foreground move at different rates. The eye perceives a three-dimensional space with zero JavaScript.

Decoupled Depth

Background and foreground move at different rates. The eye perceives a three-dimensional space with zero JavaScript.

Scene Rhythm

Full-screen sections pace the user's journey. Each scroll reveals a new emotional register — like chapters in a film.

Glass Clarity

Semi-transparent overlays and backdrop-blur keep text legible against any gradient, maintaining WCAG contrast ratios.

UI 组件

Components

按钮 Button

The Parallax View

Scroll to reveal layered storytelling. Foreground stays calm while background depth keeps moving.

bg-black/40 backdrop-blur-md · Glass Glare on hover

沉浸式滚动

全屏区块配合固定背景，营造如海浪涌动般的深度感知体验。

层叠视差

背景、内容、装饰三层以不同速率运动，仿佛身处立体空间之中。

玻璃形态

backdrop-blur 与半透明白色叠加，让内容卡片漂浮于渐变宇宙之上。

表单 Form · 玻璃输入

姓名

邮箱

留言

通知 Alerts

bg-fixed 是视差效果的核心，确保背景固定于视口。

移动端 iOS Safari 需使用 JS 降级方案。

渐变覆盖层保证文字对比度 WCAG AA 标准。

避免超过 6 个视差层级影响性能。

下拉菜单 Dropdown

标签 Tags

ParallaxCSSbg-fixedScrollImmersiveLayout

技术规范

Layout Specs

bg-fixed — The Core Trick

<section
  className="relative min-h-screen
             bg-fixed bg-cover bg-center
             flex items-center"
  style={{
    backgroundImage:
      "linear-gradient(135deg, #0f172a, #1e3a5f)"
  }}
>
  <div className="absolute inset-0 bg-[#1e3a5f]/60" />
  <div className="relative z-10 max-w-4xl mx-auto px-6">
    {/* content */}
  </div>
</section>

Section Height

min-h-screen

Every section fills the full viewport height

Background Lock

bg-fixed

background-attachment: fixed — the parallax engine

Nav Z-Index

z-50

fixed + backdrop-blur-lg stays above all layers

Content Card

bg-white/90

+ backdrop-blur-sm rounded-2xl shadow-xl

Overlay Opacity

bg-[#1e3a5f]/55

absolute inset-0 — guarantees text contrast

Content Layer

relative z-10

Higher z-index than the overlay mask

动画节奏规范

Cinematic Slowness

duration-500 ~ 700

保持电影叙事节奏，避免急促感

Glass Glare

opacity 0 → 1 on hover

渐变扫光层模拟镜头反光效果

Decoupled Depth

blur + opacity only

前景避免大幅 Y 轴移动

视觉过渡

Section Transitions

区块之间的视觉切换是整个视差体验的关键节点。颜色故事的演变控制了情绪弧度。

本 Showcase 的渐变旅程

Section 1 — Hero

深夜蓝 · 宇宙开幕

Section 2 — Philosophy

皇室蓝 · 概念导入

Section 3 — Features

海洋蓝 · 深度展开

Section 4 — Components

暗板岩 · 技术聚焦

Section 5 — Specs

极夜蓝 · 规范锚定

Section 6 — Transitions

电蓝渐暗 · 过渡本身

Section 7 — Use Cases

深空蓝 · 场景收敛

Footer

接近黑 · 落幕

Hard Cut 直接切换

相邻 section 使用反差较大的渐变，比如深蓝切换到蓝绿，制造强烈的「翻页感」。每次切换都是一个情绪重置点。

Soft Fade 渐变连接

相邻 section 的结尾渐变色与下一个 section 的起始色保持 30% 的色相相近度，形成流动的视觉丝线。

适用场景

Use Cases

视差滚动最适合需要叙事节奏和情感深度的场景 —— 让每次滚动都成为一次发现。

Brand Story

Marketing

Walk visitors through a narrative arc — each section reveals a chapter as they scroll, with the background providing emotional context.

Product Showcase

E-commerce

Layer product imagery against fixed environments to simulate a studio shoot unfolding in motion.

Portfolio

Creative

Separate creative projects into full-screen scenes. Recruiters experience deliberate pacing rather than an overwhelming grid.

Landing Page

SaaS

Anchor sections become natural conversion points — the fixed background keeps branding visible while CTAs scroll into view.

Immersive Article

Publishing

Long-form editorial content stays engaging when each section change feels like turning a page in a richly illustrated book.

Event Microsite

Events

Countdown, schedule, and registration flow across depth layers, giving a sense of arrival at a physical venue.

设计规则

+必须遵循

—使用 bg-fixed 创造固定背景视差效果
—每个区块使用 min-h-screen 全屏高度
—内容区使用半透明背景 bg-white/90 增强可读性
—背景图片使用 bg-cover bg-center 保证比例
—统一使用较长缓动 duration-500/700 营造电影式节奏
—卡片可加入 Glass Glare 扫光层增强镜头反光感
—交互优先通过透明度和 blur 变化表达景深

-禁止事项

×禁止背景图片和内容对比度不足
×禁止区块高度不一致破坏节奏
×禁止过多视差层级造成性能问题
×禁止忽略移动端的视差降级处理
×禁止内容过于密集破坏焦点
×禁止卡片 hover 大幅上下跳动
×禁止短促急促动画，破坏沉浸叙事

订阅 StyleKit 更新

每周推送新增风格、技术笔记和设计案例。