feat: 顶级官网式沉浸打磨(视差叙事 / 海报 Hero / 星尘氛围) - #4
Merged
Merged
Conversation
① 滚动即叙事:Story 图片纵深视差(--depth 每帧写入,60fps)、sticky 右上角号牌跟随屏次与展厅、坐标统一防边界误判 ② Hero 海报化:主标题超大号 clamp 最高 10.5rem、入场模糊浮现动画、视频背景增强暗化 ③ 微交互:按钮按压反馈/焦点环、既有导航下划线/卡片微缩放/标签 hover 保留 ④ 深空氛围:story 专属星尘粒子层(上升星点+柔光团,零依赖 canvas,尊重减弱动效与专注模式) - 移动端 390 视口无溢出;桌面/移动 console 零报错;tsc+build 通过
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
向 SpaceX / Apple 等高级官网学习的一轮落地:
① 滚动即叙事:/story 每屏图片加纵深视差(--depth 每帧写入,transform-only 60fps);右上角新增 sticky 号牌,跟随当前屏号 + 展厅英文名(进横廊显示横廊序号)
② Hero 海报化:主标题超大号(最高 10.5rem)+ 幕布式入场动画;视频背景增强暗化对比
③ 微交互:按钮按压反馈 + 键盘焦点环;导航下划线生长 / 卡片 hover 微缩放沿用
④ 深空氛围:story 专属星尘粒子层(缓慢上升星点 + 柔光团,零依赖 canvas;尊重 prefers-reduced-motion 与专注模式)
浏览器实测:桌面/移动 390 视口均无横向溢出;号牌顶部/横廊/回顶状态正确;--depth 随滚动变化;console 零报错;tsc + build 通过。