釉下生花 — 醴陵釉下五彩瓷数字画卷

一、项目简介

本项目是一款以醴陵釉下五彩瓷为主题的多页面静态展示网站，整体视觉采用水墨青花、画卷卷轴风格，通过动画与交互呈现瓷器文化的历史脉络与代表作品。站点名称为「釉下生花」，核心叙事围绕「千年瓷韵，釉下生花」展开。

技术栈为原生 HTML + CSS + JavaScript，依赖 jQuery 3.1.1 作为 DOM 操作基础，无后端、无构建工具，可直接用浏览器打开运行。

---

二、功能模块

1. 总览页（欢迎/导览）

• 路径：页面/0.总览/index.html
• 定位：站点入口与品牌展示页，介绍「醴陵釉下五彩瓷」主题。
• 主要能力：
  • 画卷式视窗展示青花盘、瓶、罐等器物剪影，配合 SVG 水墨丝缕滤镜营造质感。
  • 竖排诗句「釉下藏春 / 五彩呈祥 / 瓷韵天成」与动态飞鸟装饰。
  • 主标题「醴陵釉下五彩瓷」逐字弹入动画，印章、副标题「千年瓷韵　釉下生花」依次入场。
  • 底部「进入」按钮跳转至站点首页。
  • 全站统一水墨云纹、花瓣飘落背景动效。

2. 首页（作品 3D 画卷轮播）

• 路径：index.html（项目根目录）
• 定位：核心导航枢纽，以 3D 旋转木马形式陈列五件代表性瓷器作品。
• 主要能力：
  • 公共顶部导航栏（总揽 / 首页 / 窑火流源）。
  • 3D 旋转木马轮播：五件作品以画卷为背景卡片环绕展示，支持点击跳转至对应作品赏析页。
  • 每件作品通过 URL 参数 ?id=1~5 与赏析页联动。
  • 水墨云、花瓣环境动效。

3. 窑火流源（制瓷工艺时间轴）

• 路径：页面/2.窑火流源/index.html
• 定位：展示瓷器从原料到成品的制作流程与历史渊源。
• 主要能力：
  • 时间轴式横向轮播，支持 3 项或 5 项同屏展示模式（当前为 3 项模式）。
  • 自动轮播（可配置停留间隔），中央选中项高亮放大，两侧为缩小预览。
  • 六张工艺配图（制瓷流程各阶段），背景两侧水墨长卷横向漂移。
  • 公共导航栏与环境动效。

4. 作品赏析（竖排文字画卷阅读）

• 路径：页面/3.作品赏析/index.html
• 定位：单件瓷器的深度赏析页，模拟传统书画竖读体验。
• 主要能力：
  • 通过 URL 参数 id 加载对应作品（共 5 件）。
  • 竖排文字布局：标题、器物图、工艺解析、特点说明等按列从右向左依次入场。
  • 每件作品可独立配置标题色、正文色、器物缩放比例。
  • 顶部返回按钮回到首页；独立顶栏样式（不使用公共导航栏）。

---

三、公共能力

模块	文件	说明
公共导航栏	公共库/全局js/common-header.js	统一生成顶部导航，支持按页面设置当前项与路径前缀
环境动效层	公共库/全局js/ambient-canvas.js	Canvas 水墨云漂移 + 花瓣飘落，各页可独立配置密度、区域、速度
全局样式	公共库/全局css/css.css	全站基础样式、布局与组件外观
字体	公共库/全局css/fonts.css + 公共库/font/	云峰寒蝉体、云峰静龙行书、鸿雷板书简体等书法字体
3D 轮播	页面/1.首页/3d-carousel.js	首页作品 3D 旋转木马组件
时间轴轮播	页面/2.窑火流源/slider.js	窑火流源页横向时间轴轮播组件
作品渲染	页面/3.作品赏析/works.js	赏析页竖排布局与入场动画
作品数据	页面/3.作品赏析/works-mock.js	五件作品的标题、图片、文案等 Mock 数据

---

四、页面流转关系

总览页 ──「进入」──► 首页（3D 作品轮播）
                         │
           ┌─────────────┼─────────────┐
           ▼             ▼             ▼
        总览页       窑火流源      作品赏析（?id=1~5）
      （导航返回）  （工艺时间轴）   （点击轮播项进入）

• 推荐浏览顺序：总览 → 首页 → 窑火流源 / 作品赏析
• 作品赏析入口：首页 3D 轮播点击对应作品卡片

---

五、标准目录与文件结构

homework-qinghuaci/                 # 项目根目录
│
├── index.html                      # 站点首页（3D 作品轮播）
├── 项目说明.md                     # 本说明文档
│
├── 公共库/                         # 全站共享资源
│   ├── font/                       # 自定义字体文件
│   │   ├── 云峰寒蝉体.ttf
│   │   ├── 云峰静龙行书.ttf
│   │   └── 鸿雷板书简体-正式版.ttf
│   │
│   ├── 全局css/                    # 全局样式
│   │   ├── css.css                 # 主样式表
│   │   └── fonts.css               # 字体声明
│   │
│   ├── 全局imgs/                   # 全站通用图片
│   │   ├── 背景.jpg                # 全站背景
│   │   ├── 画卷.png                # 轮播卡片画卷底图
│   │   ├── 框架.png                # 时间轴选中框
│   │   ├── 作品1.png ~ 作品5.png   # 五件瓷器作品图
│   │   ├── menu-bg-qinghua-v2.png  # 导航按钮背景
│   │   ├── btn-bg.png              # 返回按钮背景
│   │   ├── bird.gif                # 飞鸟动效
│   │   ├── cloud-ink-1.png         # 水墨云贴图
│   │   ├── cloud-ink-2.png
│   │   ├── petal-1.png ~ petal-3.png  # 花瓣贴图
│   │   └── ...
│   │
│   └── 全局js/                     # 全站通用脚本
│       ├── jquery-3.1.1.min.js     # jQuery 依赖
│       ├── common-header.js        # 公共导航栏组件
│       └── ambient-canvas.js       # 水墨云/花瓣环境动效
│
├── 页面/                           # 各功能页面（按浏览顺序编号）
│   │
│   ├── 0.总览/                     # 欢迎导览页
│   │   ├── index.html
│   │   ├── overview.css            # 总览页布局样式
│   │   ├── overview-anim.css       # 总览页动画样式
│   │   ├── overview-anim.js        # 总览页动画编排
│   │   └── imgs/                   # 总览页专属图片
│   │       ├── 青花瓷-盘.png
│   │       ├── 青花瓷-瓶.png
│   │       ├── 青花瓷-罐.png
│   │       └── 印章.png
│   │
│   ├── 1.首页/                     # 首页逻辑（入口 HTML 在根目录）
│   │   └── 3d-carousel.js          # 3D 旋转木马轮播组件
│   │
│   ├── 2.窑火流源/                 # 制瓷工艺时间轴页
│   │   ├── index.html
│   │   ├── slider.js               # 时间轴轮播组件（正式版）
│   │   ├── slider copy.js          # 轮播组件备份副本
│   │   └── imgs/                   # 工艺配图
│   │       ├── 图-1.png ~ 图-6.png
│   │       └── 标题框.png
│   │
│   └── 3.作品赏析/                 # 单件作品赏析页
│       ├── index.html
│       ├── works.js                # 赏析渲染与动画逻辑
│       ├── works-mock.js           # 作品数据
│       ├── works.css               # 赏析页样式
│       └── bg.png                  # 赏析页背景
│
└── 演示材料/                       # 演示与汇报素材
    ├── 演示视频.mp4
    └── 配音.mp3

---

六、运行方式

1. 克隆或下载项目到本地。
2. 使用现代浏览器（Chrome、Edge、Safari 等）直接打开：
   • 导览入口：页面/0.总览/index.html
   • 或直接进入首页：根目录 index.html
3. 无需安装依赖或启动本地服务器（若遇跨域限制，可用任意静态文件服务器托管项目根目录）。

---

七、设计说明

• 视觉语言：青花蓝、宣纸米白、水墨晕染，按钮与边框采用山水青花纹样。
• 交互节奏：总览页偏仪式感入场；首页强调 3D 空间浏览；窑火流源强调时间流动；作品赏析强调竖读与逐列呈现。
• 数据方式：作品赏析内容目前以前端 Mock 数据维护，后续可替换为接口或 JSON 数据源。
• 扩展建议：可增加更多作品条目、窑火流源工艺说明文字、全站音效与演示视频联动等。