铸光：中华青铜器数字展

铸光：中华青铜器数字展

PC 端静态多页数字展。按章节浏览；主叙事由滚动驱动（GSAP ScrollTrigger）。

功能模块

全站共用

• 顶栏导航：序 / 时间 / 铸造 / 纹样 / 金文 / 礼器 / 藏品；当前页高亮
• 阅读进度条：随整页滚动更新
• 页脚品牌回链至序章
• 多数章节支持「滚动推进 ↔ 底部/侧栏按钮跳段」

序（index.html）

• 首屏：展厅氛围底图 + 主标题「一盏灯，照见三千年前的铸痕」
• 器壁光沿剖开：滚动切换口沿 → 腹壁 → 浮雕三层镜头与文案；可点击步骤按钮
• 四次靠近：水平横移四张内容卡（器形 / 铸造 / 纹样 / 金文）
• 把光拧斜：切换锈色 / 刀痕 / 范线三种读法
• 下一章：进入时间

时间（chronicle.html）

• 首屏：总述四朝青铜如何变化
• 四朝地层：商 / 西周 / 春秋 / 战国；钉扎滚动切换各朝面板与顶栏进度
• 切开一件器：沿形 / 纹 / 字 / 用四个节点推进细读
• 下一章：进入铸造

铸造（casting.html）

• 首屏：范铸主题文案 + Three.js 线框鼎（可随滚动转动，可用指针拖拽）
• 范铸四步：同台分层揭示分范 → 合范 → 浇注 → 脱范；可点步骤标签
• 脱范之后：细读铸缝、壁厚、纹样等铸痕信息
• 下一章：进入纹样

纹样（motif.html）

• 首屏：说明纹样先刻于范、再随铜液成形
• 中轴合拢：左右半面滚动合拢为完整纹样；可点分面 / 对位 / 合拢
• 母题横读：水平推进兽面 / 夔龙 / 云雷
• 下一章：进入金文

金文（inscription.html）

• 首屏：强调铭文在器内暗部
• 器内拓显：暗部定位 → 摩擦拓显 → 字形浮出；可点步骤
• 读出之后：三列（位置 / 笔势 / 内容）滚动横扫加深，模拟拓墨感
• 下一章：进入礼器

礼器（ritual.html）

• 首屏：说明器物在礼仪中成组出现
• 细节镜头：滚动放大并切换鼎 / 簋 / 尊 / 爵细节图与说明
• 俯视席面：中央立鼎后，连线依次连至簋 / 尊 / 爵；线到位后器位出现，右侧焦点图切换
• 三动作：整屏横移盛载 / 献酬 / 洁净
• 下一章：进入藏品

藏品（collection.html）

• 首屏：档案抽屉主题，文案靠右
• 档案屉：滚动逐层抽出鼎 / 簋 / 尊 / 爵 / 盘 / 铭；右侧检视图同步切换
• 留下一层：六张研究层卡片随滚动逐张显现；点击可本机留存（localStorage），可清除
• 闭环：回到序章

---

目录结构

homework-zhuguang-qingtongqi/
├── index.html                 # 序章页面
├── chronicle.html             # 时间章页面
├── casting.html               # 铸造章页面
├── motif.html                 # 纹样章页面
├── inscription.html           # 金文章页面
├── ritual.html                # 礼器章页面
├── collection.html            # 藏品章页面
├── README.md                  # 项目说明
├── 演示材料/                  # 演示相关文稿与素材
│   └── 演示视频.md
└── assets/                    # 静态资源根目录
    ├── css/
    │   ├── site.css           # 全站：变量、顶栏、进度条、页脚、噪点层
    │   └── pages/             # 各章专用样式
    │       ├── home.css       # 序
    │       ├── chronicle.css  # 时间
    │       ├── casting.css    # 铸造
    │       ├── motif.css      # 纹样
    │       ├── inscription.css# 金文
    │       ├── ritual.css     # 礼器
    │       └── collection.css # 藏品
    ├── js/
    │   ├── site.js            # 全站：进度条、顶栏压缩、导航当前页
    │   └── pages/             # 各章动效与交互（GSAP / ScrollTrigger）
    │       ├── home.js        # 序
    │       ├── chronicle.js   # 时间
    │       ├── casting.js     # 铸造（含 Three.js 线框鼎）
    │       ├── motif.js       # 纹样
    │       ├── inscription.js # 金文
    │       ├── ritual.js      # 礼器
    │       └── collection.js  # 藏品（含 localStorage 留存）
    ├── img/                   # 展陈图片与品牌图
    │   ├── zhuguang-mark.png           # 站点图标 / 品牌标志
    │   ├── bronze-hero-vessel.jpg      # 序首屏等大件礼器
    │   ├── bronze-rim-detail.jpg       # 口沿 / 器缘细节
    │   ├── bronze-home-relief.jpg      # 腹壁浮雕
    │   ├── bronze-taotie-macro.jpg     # 饕餮等纹样近景
    │   ├── bronze-timeline-profile.jpg # 时间首屏等
    │   ├── bronze-casting-workshop.jpg # 范铸工坊氛围
    │   ├── bronze-mold-fragments.jpg   # 范片 / 铸痕
    │   ├── bronze-inscription-detail.jpg  # 器内铭文
    │   ├── bronze-inscription-rubbing.jpg # 拓片层
    │   ├── bronze-ritual-group.jpg     # 礼器群像 / 席面底
    │   ├── bronze-ding-center.jpg      # 居中鼎（席位等）
    │   ├── bronze-archive-hero.jpg     # 藏品首屏抽屉
    │   ├── bronze-drawer-ding.jpg      # 档案屉·鼎
    │   └── bronze-archive-drawers.jpg  # 档案柜实拍备用
    └── vendor/                # 第三方库（本地引用，无 CDN）
        ├── gsap.min.js        # 动画核心
        ├── ScrollTrigger.min.js # 滚动钉扎与 scrub
        └── three.min.js       # 三维（仅铸造页）

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/homework-zhuguang-qingtongqi