C1 营地 / 4700 米
第一章 / 海拔 4700 米
出了灌木林, 冰碛石开始说话
「05:40 出发, 头灯扫过最后一丛杜鹃。十一点过后, 碎石坡接管了植被, 世界的颜色从绿退成灰, 脚下的声音从软变硬。」 队长 周砚 / 录音日志 第 1 夜
- 650米
- 垂直上升
- 5 时 40 分
- 林线段用时
- -9°C
- 夜间最低
岩塞段 / 5200 米
第二章 / 海拔 5200 米
三段路绳, 横切刀刃脊
脊线最窄处只容一只登山靴。向导在前面试雪层, 我们用三段路绳把 180 米的暴露感切成三口温水。风持续从西侧来, 雪沫贴着岩壁横着飞。
- 180米
- 暴露段全长
- 3段
- 路绳保护
- 62km/h
- 最大阵风
C2 营地 / 5600 米
第三章 / 海拔 5600 米
冰川在夜里结了一层壳
凌晨的雪面冻得能踩出脆响。结组沿雪桥逐段推进, 绕开两条张着的暗裂缝。C2 扎在两道冰瀑之间的缓坡上, 帐篷四面拉满十六根地钉。
- 2条
- 绕行暗裂缝
- 16根
- 帐篷地钉
- 4:50
- 冲顶拔营
顶峰 / 6168 米
终章 / 海拔 6168 米
09:26, 云海在脚下让路
「太阳把整条山脊镀成金铜色。东南方向, 贡嘎的轮廓浮在云上, 像另一支夜行队伍没熄的灯。停留 22 分钟, 拍照, 录像, 给家里留了一段 40 秒的语音。」 队员 沈一苇 / 冲顶日手记
- 10-04 09:26
- 登顶时刻
- 22分钟
- 顶峰停留
- -21°C
- 顶峰温度
下撤之后 / 数据接棒
叙事负责记忆, 表格负责事实
整段攀登的时间线与关键数据如下。行与行使用同一组 grid 列, 任何窗口宽度下都对齐。
行进时间线
时间
节点
海拔
10-02 05:40
离开大本营, 进入灌木林带
4050 米
10-02 11:20
抵达 C1, 冰碛石平台扎营
4700 米
10-03 06:10
通过岩塞段, 三段路绳
5200 米
10-03 15:00
雪桥绕行后建立 C2
5600 米
10-04 04:50
拔营冲顶, 结组行进
5600 米
10-04 09:26
登顶
6168 米
10-04 14:05
撤回 C1, 回收路绳
4700 米
10-05 10:30
全队回到公路垭口
4050 米
关键数据
项目
数值
备注
累计上升
2118 米
含冲顶日 568 米
全程用时
3 天 6 小时
10 月 2 日至 5 日
最低体感温度
-26 °C
冲顶晨, 含风寒效应
最大阵风
62 km/h
岩脊段西侧风
路绳 / 营地
3 段 / 2 处
C1 4700 / C2 5600
队伍
周砚
队长 / 登山向导
十四座 5000 米级路线经验, 负责整体决策与雪层判断。
沈一苇
摄影 / 影像记录
高海拔纪录片摄影师, 冲顶日负重 11 公斤, 留存 240 分钟素材。
何朴
医疗 / 生理监测
每日两次血氧与心率记录, 全队零冻伤撤回。
阿依古丽
结组领攀 / 冰岩技术
岩塞段与雪桥段领攀, 负责路绳架设与回收。
风格说明 / Parallax Storytelling
这页视差是怎么搭的
多层深度由滚动驱动的 transform 完成, 每章一个 sticky 场景五层速率, 不依赖任何视差库。
设计令牌
- 色彩
#2563EB/#6B25EB/#EBAD25 - 底色与正文
#F8FAFC/#0F172A - 圆角基准
14px/ 字体 Inter + Noto Serif SC - 章节色板: 黎明靛 / 林线青 / 岩脊灰蓝 / 雪线亮蓝 / 顶峰夜金
视差结构
- 远景
0.10/ 中景0.16-0.24/ 近景0.32-0.34/ 前景0.44/ 路标0.52 - 层图形全部为 CSS clip-path / 渐变 / data-URI SVG
will-change: transform合成层提升, rAF 节流滚动- scroll-snap proximity 让滚动即翻页
无障碍与降级
prefers-reduced-motion: 关闭全部视差, 内容平铺可读- 移动端自动降级为单速
0.16 - 页首跳过链接 + 章节锚点导航 +
:focus-visible - 正文对比度均不低于 4.5:1
官方 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.
- Scroll-driven
- Narrative
- Layered scrolling
- Immersive
- Progressive disclosure
- Cinematic
- Scroll-triggered