醴陵釉下五彩 · 非遗专题网站

醴陵釉下五彩 · 非遗专题网站

一、项目简介

本项目为醴陵釉下五彩非物质文化遗产主题的静态展示网站，采用原生 HTML5、CSS3、JavaScript 构建，无前端框架与构建工具，可直接在浏览器中打开运行。网站以「总览 → 历史 → 荣誉 → 工艺 → 精神 → 传承」六大篇章，系统呈现釉下五彩的文化脉络、制作技艺与当代发展。

---

二、项目功能

2.1 页面模块

页面文件	导航名称	功能说明
index.html	总览	首屏全屏轮播（Swiper），展示十大主题条目与代表图录，作为全站入口与内容导览
history.html	窑火源流	介绍醴陵陶瓷从泥土到瓷器的千年发展脉络，含 3D 旋转画廊 展示历史图集
honour.html	国瓷高光	讲述釉下五彩在国宴、礼赠等重要场景中的代表作品与荣誉时刻
production.html	匠作七关	分步展示制瓷全流程：配泥、成形、素烧、彩绘、施釉、烧成、检瓷
inheritance.html	器映丹心	融合醴陵红色文化与瓷艺精神，探讨器物承载的时代记忆与工匠精神
develop.html	新生之路	介绍活态保护、数字化传承、产学协作与对外传播等当代发展路径

2.2 全站公共能力

• 统一导航与页眉：各子页共享 Logo、站点标题与六大篇章导航链接，当前页高亮（aria-current）
• 非遗视觉主题：宣纸底色、朱砂/铜金/黛青配色，云层/纸纹/烟气等背景装饰层
• 响应式布局：适配不同屏幕宽度，导航与轮播缩略条随断点调整
• 页脚快速链接：各内容页提供站点地图式跳转与版权信息

2.3 交互与动效

能力	实现位置	说明
首屏轮播	js/index.js + Swiper CDN	Creative 3D 切换效果，缩略条联动，自动播放，支持键盘/鼠标滚轮
3D 旋转画廊	history.html + css/history.css	CSS 3D Transform 实现的环形图片展示，含镜面反射效果
滚动揭示	js/animate.js	区块进入视口时渐入上浮，支持错峰延迟
标题逐字入场	js/animate.js	将 h1/h2 等标题拆分为单字 span，逐字动画
滚动视差	js/animate.js	横幅、装饰分隔线随滚动分层位移
点击涟漪	js/animate.js	链接与按钮点击时的国风波纹反馈
自定义光标与墨迹粒子	js/animate.js	精细指针设备下的跟随光标与 Canvas 粒子拖尾
角落快捷入口	js/site.js	回顶、本页目录面板、返回总览、锚点跳转
低动效适配	全站	尊重系统 prefers-reduced-motion 设置，自动降级动效

2.4 技术特点

• 零依赖部署：除首页 Swiper 通过 CDN 引入外，其余均为原生实现
• 样式分层：common.css 承载全站主题与组件，各页面.css 仅覆盖本页差异
• 脚本分工：index.js 负责首页轮播；site.js 负责角落导航；animate.js 负责全站动效
• 无障碍考量：轮播、目录面板等关键区域提供 aria-label、aria-expanded 等属性

---

三、标准文件夹目录结构

homework-feiyi-youwucai/
├── index.html              # 首页（总览 / 首屏轮播）
├── history.html            # 窑火源流
├── honour.html             # 国瓷高光
├── production.html         # 匠作七关
├── inheritance.html        # 器映丹心
├── develop.html            # 新生之路
├── 项目说明.md              # 本说明文档
├── bg.png                  # 全站固定背景图（common.css 引用）
│
├── css/                    # 样式目录
│   ├── common.css          # 全站公共样式（主题色、导航、页脚、背景层、角落入口等）
│   ├── index.css           # 首页首屏轮播样式
│   ├── history.css         # 历史页 3D 画廊样式
│   ├── honor.css           # 国瓷高光页样式
│   ├── production.css      # 匠作七关页样式
│   ├── inheritance.css     # 器映丹心页样式
│   └── develop.css         # 新生之路页样式
│
├── js/                     # 脚本目录
│   ├── index.js            # 首页 Swiper 轮播初始化
│   ├── site.js             # 全站角落快捷入口（回顶 / 目录面板）
│   └── animate.js          # 全站动效（揭示、视差、粒子、涟漪等）
│
└── img/                    # 图片资源目录
    ├── logo.jpg            # 站点 Logo
    ├── show1.png ~ show10.png   # 首页轮播展示图
    ├── change1.png ~ change5.png # 历史页 3D 画廊图
    ├── m1.png ~ m8.png     # 制作工艺步骤配图
    ├── maoci1.png / maoci2.png  # 国瓷作品图
    ├── r2.png / r3.png / r5.png # 红色文化旧址图
    ├── d1.png / d2.png     # 传承发展案例图
    └── …                   # 其他页面配图

3.1 目录约定说明

目录/文件	职责
根目录 *.html	每个 HTML 文件对应一个独立页面，通过 <nav> 互相链接
css/common.css	必须先于页面专属 CSS 引入，提供变量、重置、公共组件
css/<页面名>.css	仅编写该页面特有布局与视觉，避免污染全站
js/index.js	首页轮播逻辑；部分子页 header 内也引入，用于导航相关兜底
js/site.js	依赖 .c-corner DOM 结构，在含角落入口的页面底部引入
js/animate.js	内容页底部引入，自动扫描页面元素并挂载动效
img/	统一存放位图资源；HTML/CSS 中以相对路径 img/xxx 引用
bg.png	置于根目录，由 common.css 的 url("../bg.png") 引用

3.2 新增页面规范

若扩展新章节，建议遵循以下约定：

1. 在根目录新建 xxx.html，复制现有页面的 header / footer / c-corner 结构
2. 在 css/ 下新增 xxx.css，并在页面 <head> 中按 common.css → xxx.css 顺序引入
3. 在全部页面的 <nav> 与页脚链接中补充新入口
4. 图片放入 img/，命名语义化（如 章节_序号.png）
5. 需要动效时引入 js/animate.js；需要角落导航时引入 js/site.js

---

四、运行方式

1. 克隆或下载本项目到本地
2. 确保 img/ 目录与 bg.png 等资源完整
3. 直接用浏览器打开 index.html，或通过任意静态文件服务器（如 npx serve .）访问

首页轮播依赖外网 CDN 加载 Swiper，离线环境需自行下载 Swiper 并改为本地引用。

---

五、外部依赖

依赖	版本	用途	引入方式
Swiper	11.x	首页首屏轮播	jsDelivr CDN（仅 index.html）

获取完整源码

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