汉韵传统文化数字展陈站点
「汉韵」纯前端传统文化数字展陈站点，七卷页面串联观物、听见、行文、着衣、岁时、开卷与新卷，依赖 GSAP ScrollTrigger 实现滚动叙事与交互动效，本地资源可离线运行，适合前端动效类毕业设计。
项目封面
项目概览
「汉韵」是一套纯前端、可离线运行的传统文化数字展陈站点，以七卷页面串联器物、声音、书法、衣冠、岁时与长卷叙事。各卷分别呈现钉扎展厅镜头切换、叠层弦场声景、纸卷笔势生长、分层着衣遮罩、节令转盘、数字长卷横滑与 localStorage 感知留存等交互体验，依赖本地 HTML、CSS、JavaScript 与 GSAP ScrollTrigger 实现滚动叙事。全站公共能力含顶部导航高亮、阅读进度条、页头滚动压缩与卷末跳转链路，图片、字体、音频均置于本地 assets 目录，不依赖远程 CDN，适合前端滚动叙事与动效类课程作业及毕业设计。
项目说明
汉韵传统文化数字展陈站点
一、功能介绍
「汉韵」是一套纯前端、可离线运行的传统文化数字展陈站点。站点以七卷页面串联器物、声音、书法、衣冠、岁时与长卷叙事，依赖本地 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/）
三、技术栈
| 类别 | 技术 |
|---|---|
| 页面结构 | HTML5 |
| 样式 | CSS3（变量、响应式、动效精修） |
| 脚本 | 原生 JavaScript |
| 滚动动效 | GSAP + ScrollTrigger（本地 vendor 副本） |
| 静态资源 | 本地 assets/（图片、字体、音频） |
| 本地存储 | localStorage（新卷感知数据，仅存本机） |
四、运行方式
- 克隆或下载项目到本地。
- 使用现代浏览器（Chrome、Edge、Safari 等）直接打开根目录
index.html（观物首页）。 - 无需安装依赖、无需后端；图片 / 字体 / 音频 / GSAP 均为本地资源，可离线演示。
- 若个别浏览器对本地文件有限制，可用任意静态文件服务器托管项目根目录后再访问。
五、设计说明
- 叙事结构：七卷联动（观物 → 听见 → 行文 → 着衣 → 岁时 → 开卷 → 新卷），支持顶部导航跳转与卷末顺序浏览。
- 动效语言：钉扎滚动、镜头缩放旋转、遮罩过渡、径向镂空、笔势生长、分层着衣、节令转盘等。
- 数据方式：新卷感知卡写入浏览器
localStorage，可一键清空；不上传网络。 - 适用场景：文创展示、前端动效类课程设计 / 计算机设计参考。
获取完整源码
技术分类
包含内容
适合方向
适合 GSAP 滚动动效、传统文化数字展陈类前端课程设计，以及纯静态多页叙事站点毕业设计方向参考。
关于 AI源码
AI源码 整理计算机毕业设计、课程设计向的可运行项目参考，含说明文档与演示材料。完整源码请通过联系方式沟通获取。
相关推荐
查看全部 →
中医文化介绍网站
中医药文化展示静态网站，HTML+CSS+JS 实现，涵盖历代名医、经典著作、非遗传承、民族医药与 Vue 趣味答题等模块，无需后端，适合课程设计与文化主题前端大作业。
中华青铜文明
中华青铜文明博物馆静态展示站，涵盖历史溯源、器型分类、纹饰艺术、三星堆 3D 专题、数字展厅、铸铜工艺与知识挑战等模块，Three.js+Swiper 沉浸式体验。
铸光：中华青铜器数字展
「铸光」中华青铜器数字展，七章滚动叙事覆盖序、时间、铸造、纹样、金文、礼器与藏品，GSAP ScrollTrigger 驱动，铸造页含 Three.js 线框鼎，适合 HTML 多页文化展陈类课程设计。
釉下生花 — 醴陵釉下五彩瓷数字画卷
醴陵釉下五彩瓷主题静态展示站「釉下生花」，水墨青花画卷视觉风格，含总览导览页、3D 作品旋转轮播、窑火流源工艺时间轴与竖排文字作品赏析模块，jQuery 原生实现无后端。
本草纲目溯源
本草纲目溯源静态展示网站，以明代李时珍《本草纲目》为切入点，含名人、著作、药材三大模块，古风竖排排版配合 3D 轮播、Swiper 画轴与药材属性标注交互，纯前端无后端依赖。
非遗·油纸伞
非遗油纸伞主题纯前端展示与互动项目，含历史时间轴、工艺解读、Three.js 3D 换装、Fabric.js DIY 绘画、知识问答与虚拟展厅，localStorage 用户与作品持久化。