城市夜跑活动页
八屏竖版长图，滚动手势驱动分层视差，底部挂一个轻量报名表单。 难点在低端安卓上的滚动掉帧，最后把大量阴影和模糊换成了预渲染的静态层。
H5 / 8 屏滚动视差
数字媒体 · H5 交互
数媒H5设计
一个人、一台笔记本、一堆还没做完的动效。 这里放的是我做数字媒体与 H5 交互页面时留下的东西： 上线过的活动页、拆开重写的组件、卡住过我的适配问题， 以及那些看起来不起眼、但每次都要重新查一遍的细节。
01 / 关于
把页面当成一次完整的表达
做数媒，绕不开「一屏之内讲清楚一件事」这件事。H5 恰好是最好的练习场。
我最开始是从静态页面入门的，后来慢慢被 H5 吸引： 它没有 App 的体量，也不像普通网页那样只负责把信息排整齐。 一个滚动、一次点击、一段节奏刚好的过渡，就能让原本平淡的内容变得有人愿意看完。
日常做的事大概三类：活动交互页（长图、翻页、抽奖、问卷）、 品牌内容页（专题、年报、产品介绍）， 以及各种临时起意的小实验（滚动视差、鼠标跟随、Canvas 粒子）。 大项目靠拆，小项目靠攒，两者互相喂养。
我不太相信「一套模板走天下」。同一个交互，在 375px 宽的手机上和 1920px 的桌面上 完全是两个东西，所以每次做完都会退回小屏再走一遍， 把该砍的砍掉，把该放的放大。
02 / 作品
做过的一些页面
挑四个还在维护、也还愿意拿出来讲的。每一个都踩过坑，坑记在下一节。
年度内容专题
偏杂志感的专题页，双栏错位排版，配文与图表交替出现。 核心是把中文正文的行高、字距和段间距调到一个舒服的读数， 而不是一味追求视觉冲击。
内容页 / 杂志式排版优先
粒子连线小实验
纯 Canvas 写的粒子系统，鼠标靠近时连线、离开后缓慢散开。 用来练帧率控制和事件节流，后来拆成可复用的模块塞进了几个活动页里当背景。
Canvas / 60fps可复用模块
分步问卷流程
把一页二十个问题拆成五步，每步只问一件事，进度条给到明确反馈。 提交前的校验全部前置到单步内完成，用户不用滑回去找哪一题填错了。
交互流程 / 5 步校验前置
03 / 拆解
踩过的坑与解决方式
写下来是为了下次不用再查一遍。都是些具体的小问题，但很花时间。
2025 · 04
移动端 100vh 的老问题
首屏用 100vh 铺满，在带地址栏的浏览器里总会被截掉一截，
往下滑才补回来。改成用 JS 把真实可视高度写进 CSS 变量，再让首屏高度读这个变量，
地址栏收放时也不会跳。
视口单位移动端CSS 变量
2025 · 03
滚动动画把主线程拖住了
一开始在 scroll 事件里直接读元素位置，滑动明显发涩。
改成用 IntersectionObserver 只判断「进没进视野」，
真正的位移交给 CSS transform 和 transition 去跑，帧率立刻回来了。
IntersectionObserver性能transform
2025 · 01
中文字体的行高要单独调
直接用西文的行高比例排中文，段落会显得挤。中文字形方正、字面率高， 正文行高给到 1.85 到 2 之间才耐读；标题反过来要收紧，才有力。
字体排版行高可读性
2024 · 11
长页面里的锚点跳转
带固定顶栏时，锚点跳过去总会被顶栏盖住标题。
给锚点元素加一段和顶栏等高的 scroll-margin-top，
再开平滑滚动，跳转位置就正了，不用再算偏移量。
锚点scroll-margin细节
04 / 工具箱
常用的几样东西
不追新，够用就行。真正省时间的是习惯，不是工具本身。
01
原生三件套
HTML、CSS、JavaScript。H5 页面体量小，能不引框架就不引，加载快、调试也直接。
02
浏览器开发者工具
设备模拟、性能面板、动画面板。做适配和查掉帧，一天要开几十次。
03
设计稿到切图
按 2 倍图导出，命名带尺寸后缀。切图规范一次，后面改版能省掉一半沟通。
04
自己的片段库
视差、渐显、分步表单、进度条，写顺手的都留一份，新项目直接拿来改。
05 / 记录
最近在做的事
按时间往下排，写完就放着，隔一阵回头看还挺有意思。
2025 · 05
把个人片段的渐显效果统一成一套 IntersectionObserver 方案，删掉了三份重复代码。
2025 · 04
重做了一版长图活动页的滚动结构，帧率稳定在 60，低端机上也能看了。
2025 · 03
整理中文排版参数，写了一份自己用的 字号 / 行高对照表，排正文快了很多。
2025 · 02
试着把 Canvas 粒子模块抽成独立文件，三个活动页共用，改一次全都生效。
2025 · 01
开始给每个做过的页面写 一页复盘，记下当时为什么这么选。
06 / 联系
想聊页面的话
合作、提问、或者只是发现某处写错了，都欢迎说一声。
- Mailhello@zgcm.online
- Webzgcm.online
- 方向H5 交互 / 动效 / 视觉排版
- 响应工作日 1 天内
邮件里写清楚想做什么、给谁看、什么时候要，基本就能聊到点上。 如果是改现有页面，把链接一起发过来会更快； 如果只是想要个方向上的建议，也直接问，不用客气。