视差叙事Parallax Storytelling
多层背景以不同速度滚动，配合固定与黏性定位形成纵深，按章节推进叙事。沉浸感强，移动端需降级为静态分层。
典型场景品牌故事 · 年度报告 · 展览页面
编号49
年代2020s Modern
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
多层背景以不同速度滚动，配合固定与黏性定位形成纵深，按章节推进叙事。沉浸感强，移动端需降级为静态分层。
关键词
Scroll-drivennarrativelayered scrollingimmersiveprogressive disclosurecinematicscroll-triggered
别名
Parallax
效果与动效
transform: translateY(scroll), position: fixed/sticky, perspective: 1px, scroll-triggered animations
设计系统变量
--parallax-speed-bg0.3--parallax-speed-mid0.6--parallax-speed-fg1--section-height100vh--transition-duration600ms--perspective1px配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Story-dependent, often gradients and natural colors, section-specific palettes
辅色 / Secondary
Section transition colors, depth layer colors, narrative mood colors
强调色在页面底色上的对比度约 8.4:1，可用于正文与图标。
适用场景
适合 / Best For
- Brand storytelling
- product launches
- case studies
- portfolios
- annual reports
- marketing campaigns
避开 / Do Not Use For
- E-commerce
- dashboards
- mobile-first
- SEO-critical
- accessibility-required
框架兼容
customlocomotive-scroll
能力矩阵
浅色模式支持
深色模式支持
移动适配不建议
转化导向强High
渲染成本高animation / large-images
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Layers parallax smoothly,
- Story flows naturally,
- Mobile alternative provided,
- Performance optimized,
- Skip option available,
- Reduced motion fallback
CSS / 技术关键词
position: fixed/sticky, transform: translateY(calc()), perspective: 1px, z-index layering, scroll-snap-type, Intersection Observer for triggers, will-change: transform
AI 提示词
Design a parallax storytelling page. Use: scroll-driven narrative, layered backgrounds (3-5 layers), fixed/sticky sections, cinematic transitions, progressive disclosure, full-screen chapters, depth perception.