Changelog · 版本日志
版本日志Changelog
每一次改动都记在这里:改了什么、为什么改、影响了哪些页面。
按时间倒序,最新的一版在最上面。
版本列表
-
v4.0 2026.09.24 Latest
图片体检 · 体积瘦身与加载核查
优化- 14 张超标图片重压缩:胶片颗粒素材的 1200/900 显示档最高达 408KB,重编码后省 512KB(17%),颗粒质感无损目检通过;逐图核查加载属性,全站图片各就各位(首屏 eager、其余 lazy+async)。
-
v3.9 2026.09.24 Latest
PWA 清单与发布流水线固化
增强- 补全 Web App 清单(manifest):新增 192/512/遮罩安全区三枚图标与
manifest.webmanifest,"添加到主屏幕"有正确的名称、主题色与图标;对普通浏览无感、不增加首屏加载。
- 补全 Web App 清单(manifest):新增 192/512/遮罩安全区三枚图标与
-
v3.8 2026.09.24 Latest
滚动露白根治 · 剪裁矩形出屏即停绘
修复- hero 滚出视口后顶部闪现图像条带、下方图片偶发闪现:v3.4 的区块剪裁在剪裁矩形完全滚出视口时只跳过"启用 scissor"这一步、平面仍无剪裁地绘制,hero 视差下沉的 216px 正好画进下方区块。现改为剪裁矩形为空时整块跳过绘制。
-
v3.7 2026.09.24 Latest
菜单预览统一 · 预览图与栏目全站一致
修复- 同一栏目的菜单预览图在不同页面不一致:菜单预览此前有两套来源 —— 8 个静态页手写标记取了「街头掠影」「少年侧影」的第 2 幅,而全部作品/关于页由脚本按系列封面生成,同一链接悬停会看到不同的图,且与栏目封面、分享卡片(og:image)不对应。现全站统一到系列封面(
works-data单一真相源),关于页菜单初始背景同步统一为默认封面。
- 同一栏目的菜单预览图在不同页面不一致:菜单预览此前有两套来源 —— 8 个静态页手写标记取了「街头掠影」「少年侧影」的第 2 幅,而全部作品/关于页由脚本按系列封面生成,同一链接悬停会看到不同的图,且与栏目封面、分享卡片(og:image)不对应。现全站统一到系列封面(
-
v3.6 2026.09.24 Latest
页面边缘露白修复 · 根层着色与回弹抑制
修复- 滚动到页面顶/底边缘时整页变白、hero 与下方图片闪现错位:深色底只画在 body 上,
html是透明的 —— 顶/底边缘的橡皮筋回弹会拉开 body、露出浏览器默认白底;同时固定不动的 GL 画布(hero 与图片平面)不随回弹移动,弹跳的文档内容与画布错位形成闪现。 - 修复:
html着同一深底(background:var(--bg),回弹露出的区域与页面融为一体)+overscroll-behavior-y:none关闭纵向回弹链(触屏误触下拉刷新也一并防住)。已实测全站 html 计算背景 rgb(10,10,11)、overscrollY=none。
- 滚动到页面顶/底边缘时整页变白、hero 与下方图片闪现错位:深色底只画在 body 上,
-
v3.5 2026.09.24
全站动效巡检 · 降级切换交叉淡化
优化- 全站动效巡检:逐场景实测擦除转场、菜单开合(含连续快速开关)、灯箱 Flip 开合与翻页中断、悬停反馈、滚动 reveal、光标状态、预载幕布、页脚开关 —— 起止衔接均无硬切或闪现;中断恢复(快速开关后终态、Flip 中翻页、Esc 重开)状态一致。
- 性能降级切换改为交叉淡化:perf-min 切换瞬间
#gl原为直接 display:none,而 DOM 图片要 0.3s 才淡入 —— 中间存在图像突失窗口。现改为#gl / #fx先 0.4s 淡出(DOM 图片同步淡入接管),460ms 后perf-frozen再硬隐藏以停止合成开销;恢复满血时立即解冻、两层交叉淡回。 - 巡检结论(无需改动项):擦除转场的幕布初态/复位、灯箱双缓冲、菜单预览双缓冲、预载幕布、悬停 wipe-word 反馈、reveal once 触发 —— 实测均无问题;.hero / .p-hero 的 overflow:clip 已在 v3.4 覆盖平面越界。
-
v3.4 2026.09.24
项目页 hero 滚动露白修复 · GL 平面按区块剪裁
修复- 滚动时 hero 图"露白":项目页 hero 的滚动视差让图片下沉 12%(
yPercent: 12),底部超出了区块边界 —— v3.1 光粒全局化移除区块实色底后,超出部分(照片的亮白光轨)透过后续透明区块直接露出。线上实测:hero 底缘下方 93–99% 采样点为亮像素。 - GL 平面按所属区块剪裁:
gl.js为每个平面记录最近的overflow: clip/hidden祖先,渲染时对该平面启用SCISSOR_TEST裁剪到区块矩形 —— 平面与所属区块同进同出,等效于 DOM 路径的overflow: clip。视差保留,超出部分不再可见。 - 视差覆盖补偿:视差
scale 1.08 → 1.24—— 下沉 12% 与 scale 半幅 12% 相抵,图片顶边全程钉住区块顶,滚动中区块内不再露出任何底色(桌面 GL 路径与移动端 DOM 路径同步生效)。
- 滚动时 hero 图"露白":项目页 hero 的滚动视差让图片下沉 12%(
-
v3.3 2026.09.24
菜单预览图修复 · 稳定加载与严格对应
修复- 预览图与栏目不匹配:菜单背景静态图在 v3.0 批量补 srcset 时被一并加上三档 srcset —— 切换预览是在同一元素上改
src,而 srcset 存在时浏览器按 srcset 选择资源、src 赋值被忽略,轮到静态层显示时预览就回到"虚拟光影"。已移除预览槽位的 srcset / sizes(JS 单用途槽位由脚本给精确 URL),并在换图前剥掉缓冲层的残留属性。 - 换栏目时预览闪烁:逐链接
mouseleave在系列之间移动时会"灭→亮"打一次(容器透明度 1→0.4→1)。改为系列间直接换图、离开整组菜单链接才收场;decode回调加 token 防竞态,快速连切时过期回调不再上屏。 - 首次悬停现等网络与失败处理:菜单打开即预载全部栏目的预览图(1200 档 + 900 档兜底);解码失败先降 900 档一次,再失败保持当前画面(不闪不空,alt 为空不出破图图标);预览层底图去掉
loading="lazy"(隐藏遮罩内的 lazy 时序不可控)。
- 预览图与栏目不匹配:菜单背景静态图在 v3.0 批量补 srcset 时被一并加上三档 srcset —— 切换预览是在同一元素上改
-
v3.2 2026.09.24
性能分级改为用户开关 · 页脚独立设置项
优化- 性能自适应改为用户可选:性能分级(PerfGuard)不再自动运行 —— 默认关闭,所有设备一律满血运行、完全跳过分级与限制逻辑;页脚新增独立设置行(与页脚导航以分隔线明确区分),手动开启后才按设备型号自动匹配档位(CPU 微基准 + GPU 探测 + 帧率实测)。
- 状态持久化与即时生效:开关状态存于 localStorage,跨页面 / 跨会话恢复;切换即时生效(CSS 类移除 / 添加,无需刷新)——关闭即清除全部分级标记恢复满血,开启即按静态档位定性并补跑基准;快速连切、先开后关等边界均已处理(计数器重开、基准只调度一次)。
- UI 与引擎单一真相源:开关状态文案读引擎的
data-perf-level(开启后被实测再降级 / 恢复时文案联动显示实际档位),aria-checked 同步;触屏 44px 触控目标、focus-visible 描边、role=switch 语义齐备。
-
v3.1 2026.09.24
光粒全局背景化 · 贯穿全部页面与区域
优化- 光粒层全站贯穿:光粒画布本就是固定全屏层(位于内容之下、z-index 1),此前被多个与页面底色完全相同的实色遮罩挡住,只在 hero 等少数区域可见。现移除
.section.solid / .about-teaser / .drift / .p-intro / .p-gallery五处纯遮罩底(与 body 同色,移除后除透出光粒外零视觉变化),光粒得以贯穿首页、作品、项目、关于、版本日志全部页面与区域。 - 暗色带改为半透明:
.marquee / .p-quote / .p-next / .site-foot四处保留原有色调,改为 55% 不透明度 —— 光粒隐约透出,文字与图片仍在其上,可读性不受影响;.depth-stage影像舞台保留实色底(全幅影像模块,光粒不参与)。 - 渲染与降级不变:光粒层渲染成本与改版前完全相同(画布本就固定全屏);触屏粒子数 170、DPR ≤1.5、
perf-lite / perf-min与 reduced-motion 的既有降级全部继续生效。404 页与主站一致保持无脚本设计。
- 光粒层全站贯穿:光粒画布本就是固定全屏层(位于内容之下、z-index 1),此前被多个与页面底色完全相同的实色遮罩挡住,只在 hero 等少数区域可见。现移除
-
v3.0 2026.09.24
对齐主站:响应式图片 · 缓存与安全头 · 性能分级 · RUM
修复- og:image 标签语法错误:og:image 未闭合且下一行多出
/>,微信 / Facebook / LinkedIn 抓取器会解析失败导致分享卡片无图。全站 11 页已修复并通过标签闭合校验。 - 全站响应式图片:76 张静态图补齐
srcset + sizes(900 / 1200 / 1800 三档按视口与 DPR 自动选择,移动端不再固定下载 1200px 单档);hero 恢复主站的 480 / 900 / 1400 / 1800 四档 srcset(480 档自主站回迁)与imagesrcset预载。 - 缓存与安全响应头:新增 Cloudflare Pages
_headers—— HTML max-age=0 立即生效,CSS / JS / 字体 immutable 长缓存(?v=NN 版本号引用,改版换 URL 不陈旧),图片 30 天;补充 X-Frame-Options、CSP(自包含静态站定制)、nosniff、Referrer-Policy、Permissions-Policy,ACAO 收敛为站点自身域名。 - apple-touch-icon:生成 180×180 图标(og-cover 中心裁方)并全站声明。
- 性能分级与 RUM 迁移:主站 PerfGuard(deviceMemory / 核数 / 形态分级 + CPU 微基准 + GPU 探测 + 逐帧长帧比实测 → L1 perf-lite / L2 perf-min 两级降级)与 RUM(LCP / INP / CLS 本地采集,?rum 面板)迁移至 Beta;Beta 原先只有断点降级。og-cover 压缩 183KB → 80KB。
- og:image 标签语法错误:og:image 未闭合且下一行多出
-
v2.9 2026.09.24
灯箱双缓冲防闪 · GL 水纹方向修正
修复- 灯箱快速切图闪旧图:旧实现在同一个
<img>上换src,新位图就绪前浏览器会一直显示旧位图,且预载的是 1200 档而显示用 900 档(每次翻页都要现等网络)。改为双缓冲交叉淡化:新图先在缓冲层解码,再从旧图上方淡入,落定后才交接给主层 —— 任何切换速度下都不再有旧图残留;邻图预载同步改为 900 档。 - GL 水纹方向相反、离图片中心越远越明显:指针坐标被垂直镜像后再传入着色器(uv 空间 y 向下、指针却按 y 向上换算),鼓包 / 涟漪中心落在指针的对称位置 —— 中线上恰好无偏差、越靠上下偏差越大;横向速度扭曲的采样方向也与图像运动相反。已统一坐标系并翻转横向采样方向,水纹流向与交互方向一致。
- 样式回归修复:v2.8 的批量替换把 .hero-meta / .lb-foot 的
right属性写坏(righvar(--frame)d)),页头元信息与灯箱底栏的左右定位失效,已修复并全量扫描同类异常(0 残留)。
- 灯箱快速切图闪旧图:旧实现在同一个
-
v2.8 2026.09.23
全站留白框架 · 纵向节奏统一
优化- 左右留白收敛为一条规则:新增
--gutter / --maxw / --frame,用max(最小边距, 居中余量)同时保证「小屏不挤压、大屏不过度拉伸」,视口连续变化、无需断点。此前 hero/works/页脚走--pad(封顶 72px)、grid/hero-inner 走max-width:1560居中(1920 下 180px),同一屏出现两种左边界;现在 1920 下全站统一 178px。 - 去掉双重内边距:
.section与.section > .wrap各加一次横向边距,1280 下 changelog 因此出现 102px 的双倍留白,现已归为一条。 - 纵向节奏收敛:原先散落
--pad×2.4 / 2.2 / 2.0 / 1.6 / 1.4五种乘数,同级别区块间距不等;改为--sec-y(大区块)/--sec-y-sm(子块)两档,组件间距收敛到--stack-1/2/3三档并封顶。 - 覆盖层同步对齐:hero 元信息、深度图注与提示、长廊进度条、预载计数、菜单、灯箱上下栏、页脚巨字、引言、下一章、双图图注全部改用同一框架,宽屏不再与内容栏错位。
- 修复压缩产物中的 var() 破损:v2.7 的 CSS 压缩器把
calc(var(--pad) + var(--safe-l))误拆成var( - - pad),导致安全区内边距、scroll-margin、z-index 等声明整条失效(表现为部分区块内容贴边);压缩器已改为括号感知扫描,并加上产物守卫(var()被拆坏即拒绝写入)。
- 左右留白收敛为一条规则:新增
-
v2.7 2026.09.23
robots 解禁 · 死代码清理 · 静态资源压缩
优化- robots.txt 解禁版本日志:移除 Disallow: /changelog.html(与 sitemap 收录冲突),生成器同步更新。
- 无用代码清理:删除 main.css 中 24 条整段 + 多处复合选择器里的废弃类(.drift-item / .sec-head / .works-head / .p-hero-meta / .foot-sec / .link-arrow 等,页面从未使用),lightbox.js 删除未引用的 currentRect()。
- 静态资源压缩:新增 tools/build-min.py 产出 .min.css / .min.js(只去注释与空白,源码保持可读),页面改引压缩版 —— 自有 CSS+JS 342KB → 241KB(-29%),全部经语法与结构校验。
- 元信息与可访问性补齐:og:image:alt、theme-color;触屏下面包屑/页脚链接的可点区域扩到 ≥44px(透明伪元素,不占布局)。
-
v2.6 2026.09.23
预载只等首屏 · 贴图按需 · 工具化
优化- 预载幕布只等首屏资源:进度只计 hero 平面与字体,保底上限 6s → 3.2s。计入的资源由 8 个降到 2 个;3 Mbps 限速实测,幕布等待从 6006ms 降到 3202ms(本地近零延迟下 217ms → 142ms)。
- GL 贴图改为按需加载:首屏之外的平面等元素接近视口(纵 600px / 横 900px)才发起贴图请求,DOM 兜底图保持可见到贴图就绪才交棒。首屏图片请求 47 → 41 张、3512 → 2757 KB,不再与 hero 抢带宽;横向长廊因提前量按两轴计算,拖出来时不会空一下。
- 版本号收敛为单一来源:写在 site.config.json 的 version,tools/sync-version.py 校验并同步到 nav.js、各页页脚与 changelog;此前靠人工同步,改漏一处不会报错。
- 绝对地址工具化:tools/set-abs-urls.py 按 baseUrl(或环境变量 SITE_BASE_URL)注入 canonical / og:url / og:image;未配置域名时保持相对地址并提示,不猜测域名。
-
v2.5 2026.09.23
中心圆点惯性拖拽 · 查看态淡出让位
优化- 中心圆点加入惯性拖拽:按住拖动时以指数平滑跟手;松手后带着松手瞬间的速度继续滑行、逐渐减速,被弹簧磁吸回圆环正中心,快甩可滑出数十像素后回摆归位。
- 静止时圆点严格居中:距中心不足 0.5px 且近于静止时直接钉在中心、速度清零,积分器无残差;指针瞬移(首次出现、窗口切回)超过 500px 时不做飞行直接落位,并限速兜住异常输入。
- 查看类操作的环内内容不被圆点干扰:悬停图片(出现「放大」等标签)时中心圆点淡出让位,离开后平滑恢复;淡出期间位置照常跟随,恢复显示时即在正确位置。
-
v2.4 2026.09.23
收缩态复原毛玻璃环
修复- 按钮 / 链接上的光标由实心圆复原为毛玻璃小环:撤销 v2.2 的实心处理 —— 填充回到半透明白(22%)、描边回到亮白(72%)、恢复 10px 背景模糊、投影回到 4px/14px 一层;删掉深色发丝描边、纯白按下底色与 --cr-fill 变量。
- 中心圆点恢复常显:实心期它在同色圆里看不见而淡出,环恢复半透明后不再需要这条规则。
优化- 不支持背景模糊的降级路径补回:收缩态在无 backdrop-filter 的浏览器里回到 45% 白底,与常态、图片态同族。
- 三态尺寸(26 / 40 / 84px)、按下缩放(×0.86 / ×0.72)、模糊分档(3 / 10 / 12 / 16px)与中心点对齐均保持不变。
-
v2.3 2026.09.23
中心点与光标严格重合 · 移除磁吸位移
修复- 中心点与圆环不重合、越靠边越明显:圆环被"磁吸"朝目标元素中心拉,位移正比于指针到元素中心的距离(贴边小元素处饱和到 10–12px),看着像比例误差;实测圆点在 11 个网格点(含四角)始终与指针重合 0.00px。现在两者共用同一坐标,位移恒为 0。
- 移动中圆环与圆点分离:圆环原有跟随滞后(系数 0.26),停下才重合 —— "任何一帧都对齐"要求下也一并去掉(吸附感改由尺寸与材质表达)。
优化- 去掉不再需要的每帧开销:位移归零后,每 6 帧一次的矩形重测与中心平滑成了死代码,一并删除;三态尺寸、材质过渡、按下缩放与标签淡入按原设计保留。
-
v2.2 2026.09.23
光标中心点对齐 · 收缩态实心 · 编号改递进
修复- 光标中心点在缩放时偏移:transform 串里缩放排在居中平移之前,中心点会落到 (x + w(1-s)/2, y + h(1-s)/2) —— 图片态按下偏 5.9px、收缩态偏 1.8px。现在把缩放排到最后,中心点与比例无关(三种状态实测 0.00px)。
优化- 收缩态改实心:26px 小环叠毛玻璃在深色页面上读不出"这里能按",改成实心小圆点并配一条深色发丝描边;同色的圆点反正看不见,索性淡出 —— 也免得磁吸拉开实心圆时它从圆边"戳"出来。
- 吸附曲线更顺:对象中心加入时间归一化平滑(漂移卡片每 6 帧才重测一次,直接当目标会"吸一吸、顿一下");接近程度改走 smoothstep,贴边掠过不再被硬拉。
- 缩小态磁吸收敛:位移上限由 18px 收到 12px,指针始终落在实心圆内;跟随滞后、状态过渡与按下缩放的节奏按原设计保留。
- 版本号改成递进编号:全站统一为 1.0 → 1.1 → … → 1.9 → 2.0 → 2.1 → 2.2 的递进格式(小版号逐次 +1、满 9 进位),历史条目按时间顺序重编,当前 v2.2、累计 13 版。
- 标签字距补偿:字距会在末字之后留一份空隙,居中时整串字看着偏左,用等量的 text-indent 抵回。
-
v2.1 2026.09.23
灯箱连翻闪旧图 · 关闭后整页抖动
修复- 灯箱连翻时先闪出上一张:在同一个 img 上改 src 时,浏览器会一直显示旧位图直到新图解码完成,加上 900 档换 1800 档是第二次切换,快速连翻就会"旧图闪一下再变新图"。现在改成先解码、再换 src、最后才播过渡。
- 关闭灯箱后整页图片闪现、回缩抖动:滚动锁用 body 固定定位,文档高度随之塌成 0、滚动位置被归零;而详情页视差与首页 hero 都是 scroll 驱动的,整页图片于是被拖回 scroll=0 的形态,解锁又弹回。
- 锁定期间显式撑住文档高度:滚动位置全程不再变化,视差不会被重算,解锁也不需要"还原滚动位置"这一步。
- 锁定期间页面还能被动滚动:滚轮、触摸、翻页键、拖滚动条都能把背景挪走。现在补上输入拦截与"位置钉住",任何来源的滚动都被立刻拨回原位。
- 滚动条在锁定时消失:body 的 overflow:hidden 会传播成视口的 overflow,滚动条随之隐藏、视口宽度变化,整页内容与按比例图片盒子会轻微伸缩 —— 这也是"回缩"的一部分。现在锁定时不再动 overflow。
优化- 打开灯箱改用缩略图当前真正加载的那一档起飞:它此刻就画在屏幕上、必然已解码,Flip 的第一帧即正确内容,也不引入任何额外等待。
-
v2.0 2026.09.22
切页入场动画修复 · 灯箱关闭尺寸闪烁
修复- 切页只有退场、没有入场:幕布初态原来由 defer 脚本在解析完成后才写上去,慢设备上新页面常已先完成首绘,整页先露出来、幕布才"拍"上去再拉开。现在各页在首绘前就把幕布立好,入场不再取决于两者谁先到。
- 转场词接不上:退场时显示的栏目名带不到新页面。现在退场把词一并存下,新页面接着显示、随收幕淡出,两半读起来是一次连续的手势。
- 存储不可用就完全没有入场:隐私模式、直接打开本地文件时读写存储会抛错,标记传不过去。现在补了同源来源页的兜底判定(刷新与前进后退不算),并留了 2.6 秒的自动撤幕,避免没有脚本的页面被幕布永久盖住。
- 按浏览器「后退」看到一屏被盖住:页面缓存会把退场留在元素上的内联样式(幕布可见 + 满屏 + 转场词)一并恢复,而入场的逻辑此时不会再跑一遍。现在恢复时统一复位幕布。
- 关闭灯箱时图片「先变小、再弹回」:图片挂着最大宽高,而飞行框可能比打开态更大(详情页取景框就比 76svh 高 59px),图片被卡矮、还被 cover 多裁约 8%,落到缩略图那刻弹回。现在飞行期间图片撤掉限制、铺满飞行框。
优化- 转场节奏保持原样:退场 0.75 秒、逐格 0.05 秒,入场 0.9 秒、逐格 0.055 秒,仍用同一族缓动;差别在于两侧现在共用同一块幕布状态,首尾相接不再有中间空档。
-
v1.9 2026.09.22
灯箱收尾 · 长廊点击 · 光标三态
修复- 关闭末尾停顿:幕布过渡与 GSAP 抢同一个透明度,淡出被拖慢;几何用的 power4 末段几乎没有速度。现在由 GSAP 独占透明度、几何换 power2 收 0.5 秒,解锁滚动提前 80ms。
- 落点错位(图片落在缩略图旁边):落点只在关闭那一刻量一次,而长廊与拼贴墙一直在漂移,半秒里已走开十几像素;快速翻页后关闭还会残留中间态。现在每帧重测并重新插值(中途挪走 80px,误差不到 2px)。
- 详情页关闭时画面被「吹大」:图片外面那层做视差的容器被放大 1.163 倍,落点算的是放大后的矩形,画面于是越飞越大、一路飞出视口。现在落点取「图片与裁剪框的交集」,只落在看得见的那一块。
- 换高清档时画面「长大一截」:舞台盒子按作品比例写死、图片铺满它,换档只变清晰度,打开动画全程 0 次几何跳变。
- 打开动画其实没有「飞」:旧版靠 CSS 过渡 left:auto,而 auto 无法插值到像素,实测 258ms 内直接跳到终位。现在与关闭完全同构 —— 固定定位 + 实测落点 + GSAP。
- 关闭后焦点被丢回页面开头:触发元素是无 href 的链接、规范上不可聚焦,浏览器把它的焦点兜底给了外层容器。现在先试聚焦触发元素、失败再临时补 tabindex,并延后一帧归还。
- 长廊与画廊里「点了没反应」:旧版按累计位移判拖拽,画面漂移中跟手的正常点击被吞;浏览器还会把 click 派发到按下点与抬起点的公共祖先上。现在按净位移与用时判轻点,松手时按坐标命中测试直接打开。
- 版本日志的版本号错乱:列表里连续三条挂着同一个版本号(历史条目的徽标被批量替换脚本连带改掉),右上角也停在上一个版本。现已逐条归位,并把版本号收敛到单一来源。
优化- 光标三态:图片上保持正圆、只整体放大到 84px,按钮与链接收缩成 26px 小环,常态 40px;尺寸交给一个 CSS 变量与过渡,JS 只写位置。
- 光标跟随:圆点零延迟跟指针,圆环跟随系数由 0.16 提到 0.26,磁吸位移上限收到 18px,按下统一走缩放系数,毛玻璃分档 3 / 12 / 16px。
- 降级路径:落点滚出视口时改为原地缩放淡出,不做「飞出屏幕」的飞行;减弱动态效果时直接收尾。
-
v1.8 2026.09.22
灯箱关闭动画重做
修复- 关闭时的闪现与残影:舞台打开态的宽高是 auto,而 CSS 无法把它插值到像素,「飞回缩略图」一步没动就落到落点;收尾清空内联样式时大图又回到屏幕中央淡出一次。现在切成固定定位 + 显式像素矩形,几何全交 GSAP。
- 起飞点与落点不是同一个元素:打开飞的是缩略图的图片,关闭却落回外层带图注的链接(大一圈、位置也偏),落地是一次尺寸与位置的双重跳变。现在关闭复用打开时记录的来源元素。
- 放大态关闭第一帧炸开:把含缩放的视觉矩形写进宽高时没把缩放归零,2.5 倍被算成 6.25 倍。现在盒子取视觉矩形、缩放同步归零,切换瞬间画面完全一致。
- CSS 过渡与 GSAP 双写同一个缩放:飞行期间关掉舞台的 CSS 过渡,只留 GSAP 一个时钟,缩放与平移不再「先归零再飞」。
- 桌面端关闭瞬间内容横向一跳:滚动锁定解除时滚动条回来、视口宽度变化导致整页回流。加 scrollbar-gutter:stable 常驻预留槽位,锁与不锁宽度一致。
- 关闭后焦点丢失:触发元素是无 href 的链接,规范上不可聚焦,旧版把焦点还给了 body,键盘用户被丢回文档开头。现在先试聚焦、失败再临时补 tabindex,失焦即移除。
优化- 关闭收成一条时间轴:几何 0.6 秒、幕布 0.46 秒、最后 0.24 秒整块淡出 —— 落点与真实缩略图重合的瞬间画面刚好透明,交接无缝。
- 缩略图滚出视口(长廊横滚、网格远处)时不做「飞出屏幕」的飞行,改为原地缩放淡出;系统开启「减弱动态效果」时直接收尾。
- 关闭动画途中再次打开会先清干净残留状态,关闭期间禁止重复关闭,避免两个动画抢同一组属性。
-
v1.7 2026.09.22
SEO / 可访问性 / 工程化一次做全
新增- 结构化数据:10 个页面全部注入 JSON-LD,覆盖 WebSite / Person / CollectionPage / ImageGallery / AboutPage / BreadcrumbList 六类。
- SEO 元信息补齐:每页补 og:url / author / referrer 与 robots 策略;项目页的 OG 图尺寸按真实像素修正(旧版一律写死 1616×1080)。
- 响应式图片:作品的 900 / 1200 / 1800 三档正式启用 srcset + sizes,浏览器按显示宽度与 DPR 自动选档。
- 工程配套:新增部署前自检脚本(590 条站内引用全通过)、sitemap 生成脚本与站点配置、robots.txt、404 页与 README。
优化- 可访问性:修掉两处把焦点环覆盖成 outline:none 的规则;页脚导航相邻行的点击热区重叠由 18–20% 修到 0(最小目标 28×49px,达 WCAG 2.5.8)。
- 语义与降级:补齐 lang 与装饰元素的 aria-hidden,JS 渲染区块补 noscript 降级。
- JavaScript:自有脚本全部收敛为 IIFE + 严格模式,对外出口统一到单一命名空间,旧全局全部消除;补齐第三方库缺失时的守卫;全部改为 defer 加载。
- CSS:毛玻璃不支持时退回实底、图片全局防拉伸、减弱动态效果时关闭平滑滚动与无限滚动、渐进增强与精简打印样式。
- 性能:懒加载图片补异步解码,所有图片带真实宽高防 CLS,删除 3 个页面对未显示图片的无效预载。
-
v1.6 2026.09.21
查看器交互修复 · 长廊图注去蒙版
修复- 点「上一张 / 下一张」会直接关掉查看器:指针接入时把捕获无条件交给画面层,按钮的点击被重定向,又被「点图外即关闭」判成点了空白。现在工具层的指针不参与手势接管,翻页按钮在触屏与桌面都正常。
- 触屏双击放大时查看器闪一下就退出:单击关闭是立刻执行的,双击的第一下就把它关掉了。现在触屏单击延后 300ms 判定、双击可撤销,放大状态下单击改为还原。
- 双指缩放时查看器闪动:iOS 仍会缩放整个视觉视口。现在打开期间拦截原生 gesture 与多指 touchmove,捏合只作用于照片,紧随其后的那次点击也不再被误判。
- 光影长廊图注周围的方形蒙版:文字下垫了一块整宽的由透明到黑渐变,在照片上就是一圈看得见的方框。已移除,改与序号标识同一套文字晕。
优化- 倍率读数:捏合过程中实时跟随,旧版只在缩放结束后才更新。
- 图注显隐:触屏下长廊与画廊图注常显,桌面端保持悬停浮现。
-
v1.5 2026.09.21
移动端灯箱重做 · 序号标识可读性 · 跳转转场统一
新增- 移动端灯箱:按标准照片查看器重做 —— 竖向拖拽关闭(照片跟手位移并同步缩小、背幕随手势变透,松手按位移与速度判定关闭或弹回),与横向滑动切图按主方向自动分派。
- 灯箱工具层:改为错峰进出场,开场比照片晚半拍浮现、关闭时先离场,照片随后飞回缩略图;切换作品改为位移 + 微缩放的翻页过渡。
- 跳转转场:首页 / 作品 / 关于等页面的跳转补齐转场词,与菜单点击栏目时的擦除转场完全一致。
优化- 移动端首页排版:480–768px 时角色行与副信息改为竖排左对齐,旧版横排把副信息挤到右侧、文字却是左对齐。
- 序号标识:压在图上的 01 / 02 描边提亮到 68% 并加一层深色晕,位置上移减少压图比例,窄屏描边加粗一档。
- 灯箱关合:统一走同一条路径(反向飞行 → 收幕),不再出现幕布先淡、照片瞬间消失的割裂感。
修复- 移动端首页「现实纪实 · 虚拟光影」等文字与标题不在同一条左边界上。
- 序号标识在亮照片上几乎不可见,且下半部分被照片盖住。
- 灯箱滑动时的跟手位移改用 GSAP 同一变换通道,避免与缩放、位移互相覆盖。
-
v1.4 2026.09.20
大图查看器交互升级 · 系统级无障碍 · 多设备适配
新增- 大图查看器:单击图片以点击点为锚放大 / 还原;滚轮无级缩放(以指针为锚,触控板与滚轮手感一致);Home / End 跳到第一张 / 最后一张;顶部新增缩放倍率读数。
- 系统级「减弱动态效果」适配:开启后预载幕布、跑马灯、长廊自漂移、视差与拆字入场全部改为静态呈现,信息不丢失。
- iPhone 横屏安全区适配(刘海 / 圆角 / Home 指示条),导航、页脚、灯箱控件不再被压住。
优化- 作品页栏目:改为与内容同步滚动(撤掉独立的收起 / 召回动效),栏目内部动效统一为同一档时长与缓动。
- 关于页年表:系列按编号 01 → 06 排列,旧版按年份字符串排序、编号从 03 起跳。
- 无障碍:长廊与拼贴墙的无缝循环副本退出读屏与 Tab 顺序,只保留第一份可访问;菜单加入焦点陷阱;灯箱补读屏操作说明与节流的缩放播报。
修复- 电脑端从菜单返回首页后内容被遮罩层挡住、无法交互(菜单关闭路径与整页重载叠加所致)。
- 灯箱缩放与切换动画叠加时残留上一次缩放的偏移,图片飘出画面。
- 横屏手机(844×390 等)hero 使用桌面构图,导致文字与照片重叠。
-
v1.3 2026.09.20
主视觉更换 · 图片叠字可读性 · 字体统一
新增- 彩色纪实主视觉更换为「红旗与纸屑」,首页「旷野」图层更换为「人造物与树」;被换下的作品仍完整收录在对应系列页。
- 新增两个体检脚本:文字压图可读性、多设备排版。
优化- 图片叠字可读性:详情页 hero 压暗层改为四段式,亮照片上标题从 2.3:1 提升到 4:1 以上;视差图注加线性压暗;作品网格图注移出图片、落在页面底色上。
- 字体三处统一:章节标题改用展示字族(旧选择器写 h3 而页面用 h2,规则从未生效);等宽字族补上中文回退;桌面端最小字号抬到 12px。
- 作品网格:改为杂志式错落回填,宽幅图跨两列时不再留出空洞。
- 导航毛玻璃:染色加深并恢复文字投影,亮照片上的小字对比度提升 3 倍以上。
-
v1.2 2026.09.20
统一站名 · 毛玻璃导航 · 图片构图打磨 · 版本日志上线
新增- 版本日志(本页)上线,入口只放在页脚,不进入主导航。
- 顶部导航改为毛玻璃材质:半透明染色 + 高斯模糊 + 饱和度提升,滚动后染色加深并露出发丝分隔线;系统开启「降低透明度」时自动退回实色。
优化- 图片裁切与构图:两张 4:3 的照片此前被按竖幅容器裁掉约 44% 的画面,现已按真实比例呈现;详情页的双图块不再强制 4/5 竖幅,金属球体的弧线、三人合影的第三者都不再被切。
- 作品页筛选:取消 7 个各自带描边的按钮,改为一条连续控件 —— 未激活只有字色层级,激活态是一枚跟随滑动的指示胶囊,字体、字距、数字层级一并收敛。
- 全站英文站名统一为 XICHEN6·TIME。
修复- 移动端切换筛选时网格动画的闪现:改为先重算布局再播放,切换时整块交叉淡入,不再逐项重放。
-
v1.1 2026.09.20
移动端体验专项:滚动、图片、菜单、光标
修复- 移动端滚动时部分图片上下闪现并掉帧:固定 WebGL 图层与原生滚动的错帧无法调和,窄屏改为交由浏览器自身的合成管线渲染,保留粒子氛围层。
- 详情页文案下方的图片整张消失:容器缺少比例声明导致高度归零;双图块还叠加了网格项宽度归零的问题,均已修正。
- 图片与文案相互遮挡:视差区降级为流式后图层铺满舞台、压住了说明文字,现改为「画框 + 画框外文案」。
- 自定义光标在浅色照片上出现脏斑、在灯箱内被毛玻璃糊掉,且部分图片上会同时出现系统箭头。
优化- 移动端菜单新增「返回首页」入口,并重排整份菜单的字号、行高与滚动区域。
- 灯箱翻页按作品去重:长廊为无缝循环复制了内容,此前同一张图会被翻三遍。
- 作品文案与配图逐页校对,修正章节与画面错位、补回缺失的章节配图。
-
v1.0 2026.09
上线
新增- 六个系列、三十七幅作品:首页视差长廊与拖拽走廊、七层视差、作品全集与系列筛选、系列详情页与自述页。
