戏台 · 中国戏曲数字展览

戏台 · 中国戏曲数字展览

「戏台」是一套面向桌面浏览器的中国戏曲数字展览站。访客沿顶栏七个篇章依次进入，靠纵向滚动阅读每一场；顶栏显示当前篇章与阅读进度，章末可进入下一场或回到本页开头。末章回到首页，形成闭环。站点只做 PC 布局，不提供手机端适配。

---

一、项目功能详细介绍

舞台一瞬（首页）

展览总入口。首屏用帷幕与舞台画面开场，点明展览气质。随后以生、旦、净、丑四方角色横滑定屏，分别交代行当气质。接着用一桌二椅意象说明「道具不多、天地很大」。再进入场面调度段落，回应「一方舞台如何容下万里山河」。尾声导向下一场「开脸」。

开脸

讲脸谱如何落笔成人物。首屏提出「一笔落下，人物有了来处」。勾线段展示开脸过程与注视定睛。颜料段用红、黑、金分层显影，对应炽烈、筋骨与点睛意味。开相段在滚动中逐步揭示「一张脸谱不是一张脸」。照面段收束本场，可回顶或进入「锣鼓经」。

锣鼓经

讲鼓点如何托住身段。首屏「一声落鼓，身段有了去处」。四落点定屏逐张击发鼓面、锣钹、鼓师与锣鼓经谱，强调字字分寸。落点段推近击打瞬间；余响段说明鼓声停了步子还在。听见节拍段把鼓点写成台上骨架，并导向「行头」。

行头

讲穿戴如何立起气度。首屏「冠带之间，先立一身气度」。穿戴段让底衣、袍、靠、盔逐层归位，人物随之成形。细部段看刺绣与盔头，说明针脚与身份重量。一针一世界段揭示衣纹如何保存姿态。定场段收束后进入「水袖」。

水袖

讲袖势如何带动空间。首屏「袖一抬，山水便动了」。三帧一势用三张动作定格收成一路回身。看袖段说明白色也有轻重。绢上有风段揭示「袖先到，人才随后抵达」。收势段导向「一桌二椅」。

一桌二椅

讲最少道具如何换出最大天地。首屏「一桌二椅，万里山河」。换景段同一张桌叠化为山门、舟楫、帅案。约定段说明没有真山也能见行路。一桌见天地段再强调方向一转便换天地。空台段人退场后天地还在，导向「一腔三折」。

一腔三折

讲唱腔一口气如何走远。首屏「一腔三折，人还未散」。起承转合段让谱页与人像随呼吸上下错位，起承转合字随进度点亮。听人段看近景表情，强调腔有曲折、人有来处。散场之后段写声音散去舞台仍在呼吸。余韵段收束展览，可回首页或回本页第一声。

全站共用能力

顶栏左侧为品牌「戏台」，右侧为七篇章链接，当前页高亮。叠在首屏上的导航初始半透明，滚过首屏后补实底。各章尾声普遍提供进入下一场与回到本页顶两类入口。若系统开启减弱动效，页面仍保证文案与图片可读。

---

二、标准目录和备注

homework-opera-html-gsap/
├── index.html                 舞台一瞬（展览首页）
├── face.html                  开脸页
├── drum.html                  锣鼓经页
├── costume.html               行头页
├── sleeve.html                水袖页
├── props.html                 一桌二椅页
├── voice.html                 一腔三折页
├── README.md                  项目说明（功能与目录）
├── 演示文件/
│   └── 演示视频.mp4           演示用录屏素材
├── css/
│   ├── public.css             全站壳层：顶栏、揭示轨、PC 最小宽度、通用排版
│   ├── index.css              首页专用（帷幕、角色轨、场面调度等）
│   ├── face.css               开脸专用（勾线、颜料显影、开相、照面）
│   ├── drum.css               锣鼓专用（四落点、落点、余响、骨架）
│   ├── costume.css            行头专用（穿戴叠层、细部、衣纹揭示）
│   ├── sleeve.css             水袖专用（三帧收束、看袖、绢风）
│   ├── props.css              一桌二椅专用（换景叠层、约定、空台）
│   └── voice.css              唱腔专用（呼吸错位、听人、余韵）
├── js/
│   ├── public.js              全站脚本：导航高亮、进度条、叠图导航实底切换
│   ├── index.js               首页滚动叙事与帷幕、角色、场面调度动效
│   ├── face.js                开脸颜料 scrub、圆孔开相与照面等
│   ├── drum.js                锣鼓击点定屏、余响揭幕、左右对开
│   ├── costume.js             行头穿戴归位、衣纹圆孔揭示
│   ├── sleeve.js              水袖三帧收束、绢风左右对开
│   ├── props.js               一桌二椅换景、自下而上揭示、空台
│   ├── voice.js               唱腔呼吸错位、散场揭开、余韵
│   └── vendor/
│       ├── gsap.min.js        GSAP 核心（本地）
│       └── ScrollTrigger.min.js  滚动触发插件（本地）
└── images/
    ├── shared/                全站共用图（导航品牌标）
    ├── index/                 首页：舞台、四方角色、道具意象、山河调度
    ├── face/                  开脸：落笔、颜料、纹样、照面
    ├── drum/                  锣鼓：鼓师、鼓面、钹、谱、骨架
    ├── costume/               行头：全身、衣靠盔分层、刺绣、退场
    ├── sleeve/                水袖：动作三帧、细节、绢风、收势
    ├── props/                 一桌二椅：山门舟楫帅案、细节、空台
    └── voice/                 唱腔：特写、谱、呼吸、近景、余韵、空台

获取完整源码

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