企业官网建设流程全解析

汉韵传统文化数字展陈站点

一、功能介绍

「汉韵」是一套纯前端、可离线运行的传统文化数字展陈站点。站点以七卷页面串联器物、声音、书法、衣冠、岁时与长卷叙事，依赖本地 HTML / CSS / JavaScript 与 GSAP ScrollTrigger 实现滚动叙事与交互动效；图片、字体、音频均置于本地assets/，不依赖远程 CDN。

全站公共能力包括：顶部导航与当前页高亮、阅读进度条、页头滚动压缩、页间「下一卷」跳转链路，以及动效精修脚本对相邻模块收束与接棒的补强。用户可通过顶部导航任意进入各卷，也可沿卷末按钮按既定顺序浏览。

页面浏览顺序

观物 → 听见 → 行文 → 着衣 → 岁时 → 开卷 → 新卷（可回到观物）

01 观物（index.html，站点首页）

以器物为入口，建立「近观—细观」的观看节奏。

• 首屏：展厅氛围与观物导语，引导向下进入展厅（首屏主视觉独立，不参与展厅镜头切换）。
• 钉扎展厅：长卷滚动切换两幕——月白 · 近观/开片 · 细观；圆形光学镜与器物镜头随滚动 scrub 切换；可用侧栏按钮跳转到对应幕次。
• 细部检视：检视窗由中缝向两侧铺开；可在「看釉色 / 看开片 / 看光线」三层之间切换，并支持视口内自动轮播与悬停暂停。
• 下一卷：接棒进入声韵展厅（听见）。

02 听见（sound.html）

以琴弦与留白表现「看得见的声音」。

• 首屏：声韵导语；「开启本地声景」按钮控制本机古琴环境声的播放与暂停。
• 叠层弦场：同一钉扎视口内，弦场三幕（起弦 / 余韵 / 归静）滚动切换；归静后径向镂空圆孔放大揭开背层；开孔过程中「留给耳朵一片安静」整块文案同步变淡，让出主次。
• 一弦三息：黄线进度驱动起息 / 承息 / 归息节点点亮与文案切换；节点可点击定位。
• 下一卷：弦意收为墨线；「进入行文」按钮按内容宽度显示，接棒进入行文。

03 行文（calligraphy.html）

以纸卷与笔势呈现字里山河。

• 首屏：行文导语与主视觉。
• 钉扎纸卷：滚动展开纸面，并完成落笔 / 行笔 / 收锋的笔势生长叙事。
• 三句读法：短句注解区，配合滚动或交互阅读笔势层次。
• 下一卷：接棒进入着衣。

04 着衣（attire.html）

以同一衣装主体的分层遮罩完成着衣叙事，避免多图拼贴。

• 首屏：衣冠导语与主视觉。
• 分层着衣：里衣 / 外袍 / 系带三层随滚动展开；可用页内标签跳转层段。
• 材质观察：丝 / 麻 / 纹三卡独立间距，卡内双层剖开扫描；点击或聚焦切换材质说明。
• 下一卷：织纹与节令环衔接，进入岁时。

05 岁时（seasons.html）

以节令盘表现四时循环。

• 首屏：岁时导语。
• 节令转盘：滚动带动转盘旋转；春立春 / 夏小满 / 秋白露 / 冬大雪四节点可点击，同步更新节气文案。
• 四时札记：导语与四季卡片均绑定滚动 scrub 依次揭开（非一次性播放）。
• 下一卷：接棒进入开卷长卷。

06 开卷（opening.html）

数字长卷总览页，以内联样式与脚本完成多段连续叙事。

• 句号镂空过场：首屏「落在此刻」句号为空心圆锚点；双层叠合，径向 mask 圆孔放大，开孔即见背层「印痕」（非空背景再滚一屏）。
• 印痕手卷：盖印「青」→ 横向展卷 → 三章横读（落青 / 生纹 / 定印）；文案切换与手卷页面对齐——下一页到视口正中才切章；动效语言与观物圆形光学镜区分。
• 四幕横滑：器 / 乐 / 文 / 今横向滑轨。
• 收束：印章沿金环行进；下一卷进入新卷。

说明：原「回响」（有些声音不必听见…）段落已移除；开孔后直接进入印痕，再接四幕与收束。

07 新卷（new-scroll.html）

以本地留存完成七卷收束与回访。

• 首屏：新卷导语与已留存感知计数。
• 感知卡：六张感知卡（光 / 余音 / 墨迹 / 衣褶 / 节令 / 停顿）点击后写入浏览器localStorage；可一键清除本地留存。数据仅存本机，不上传网络。
• 留白印记：滚动将纸片意象聚合为朱砂印收束。
• 回观物：纸页舒展动画后，按钮返回观物首页。

二、标准文件目录

html-hanyun/ ├── index.html # 01 观物（站点首页） ├── sound.html # 02 听见 ├── calligraphy.html # 03 行文 ├── attire.html # 04 着衣 ├── seasons.html # 05 岁时 ├── opening.html # 06 开卷（主样式与动效内联） ├── new-scroll.html # 07 新卷 ├── 项目说明.md # 本说明文件 ├── 演示材料/ │ └── 演示视频.mp4 # 演示用视频 └── assets/ # 本地静态资源根目录 ├── audio/ # 音频 │ └── hanyun-guqin-ambient.mp3 ├── css/ # 样式 │ ├── site.css # 全站公共：变量、导航、页脚、基础排版 │ ├── motion-refine.css # 动效精修附加样式 │ └── pages/ # 分页面样式（与 HTML 一一对应） │ ├── index.css # 观物 │ ├── sound.css # 听见 │ ├── calligraphy.css │ ├── attire.css │ ├── seasons.css │ ├── opening.css # 开卷（补充/备用；主样式内联于 opening.html） │ └── new-scroll.css ├── fonts/ # 本地字体 │ ├── NotoSansCJKsc-Regular.otf │ ├── NotoSansCJKsc-Medium.otf │ ├── NotoSerifCJK-Regular.ttc │ ├── NotoSerifCJK-SemiBold.ttc │ └── CormorantGaramond-Local.woff2 ├── images/ # 图片（按页面分目录） │ ├── shared/ # 全站共用（印记 Logo 等） │ ├── index/ # 观物页配图 │ ├── sound/ # 听见页配图 │ ├── calligraphy/ # 行文页配图 │ ├── attire/ # 着衣页配图 │ ├── seasons/ # 岁时页配图 │ ├── opening/ # 开卷页配图 │ └── new-scroll/ # 新卷页配图 ├── js/ # 脚本 │ ├── site.js # 全站公共：进度条、导航状态等 │ ├── motion-refine.js # 相邻模块收束与接棒精修 │ └── pages/ # 分页面脚本（与 HTML 一一对应） │ ├── index.js # 观物 │ ├── sound.js # 听见 │ ├── calligraphy.js │ ├── attire.js │ ├── seasons.js │ ├── opening.js # 开卷（补充/备用；主逻辑内联于 opening.html） │ └── new-scroll.js ├── vendor/ # 第三方库（本地副本） │ ├── gsap.min.js │ └── ScrollTrigger.min.js ├── licenses/ # 第三方许可说明 │ └── third-party-notices.txt └── hanyun-vermilion-seal-logo.png # Logo 备份（主用路径见 images/shared/）

三、技术栈

四、运行方式

1. 克隆或下载项目到本地。
2. 使用现代浏览器（Chrome、Edge、Safari 等）直接打开根目录index.html（观物首页）。
3. 无需安装依赖、无需后端；图片 / 字体 / 音频 / GSAP 均为本地资源，可离线演示。
4. 若个别浏览器对本地文件有限制，可用任意静态文件服务器托管项目根目录后再访问。

五、设计说明

• 叙事结构：七卷联动（观物 → 听见 → 行文 → 着衣 → 岁时 → 开卷 → 新卷），支持顶部导航跳转与卷末顺序浏览。
• 动效语言：钉扎滚动、镜头缩放旋转、遮罩过渡、径向镂空、笔势生长、分层着衣、节令转盘等。
• 数据方式：新卷感知卡写入浏览器localStorage，可一键清空；不上传网络。
• 适用场景：文创展示、前端动效类课程设计 / 计算机设计参考。