Skip to content

feat: 顶级官网式沉浸打磨(视差叙事 / 海报 Hero / 星尘氛围) - #4

Merged
X33834 merged 1 commit into
mainfrom
feat/premium-polish
Sep 16, 2026
Merged

X33834 merged 1 commit into
mainfrom
feat/premium-polish

Conversation

@X33834

@X33834 X33834 commented Sep 16, 2026

Copy link
Copy Markdown
Contributor

向 SpaceX / Apple 等高级官网学习的一轮落地:

① 滚动即叙事:/story 每屏图片加纵深视差(--depth 每帧写入,transform-only 60fps);右上角新增 sticky 号牌,跟随当前屏号 + 展厅英文名(进横廊显示横廊序号)
② Hero 海报化:主标题超大号(最高 10.5rem)+ 幕布式入场动画;视频背景增强暗化对比
③ 微交互:按钮按压反馈 + 键盘焦点环;导航下划线生长 / 卡片 hover 微缩放沿用
④ 深空氛围:story 专属星尘粒子层(缓慢上升星点 + 柔光团,零依赖 canvas;尊重 prefers-reduced-motion 与专注模式)

浏览器实测:桌面/移动 390 视口均无横向溢出;号牌顶部/横廊/回顶状态正确;--depth 随滚动变化;console 零报错;tsc + build 通过。

① 滚动即叙事:Story 图片纵深视差(--depth 每帧写入,60fps)、sticky 右上角号牌跟随屏次与展厅、坐标统一防边界误判
② Hero 海报化:主标题超大号 clamp 最高 10.5rem、入场模糊浮现动画、视频背景增强暗化
③ 微交互:按钮按压反馈/焦点环、既有导航下划线/卡片微缩放/标签 hover 保留
④ 深空氛围:story 专属星尘粒子层(上升星点+柔光团,零依赖 canvas,尊重减弱动效与专注模式)
- 移动端 390 视口无溢出;桌面/移动 console 零报错;tsc+build 通过
@X33834
X33834 merged commit 3889333 into main Sep 16, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant