衣韵 · 中国旗袍

衣韵 · 中国旗袍

「衣韵 · 中国旗袍」是一套面向桌面浏览器的数字展览站：纯静态多页站点，用滚动叙事与滚动驱动动画，把旗袍从历史、廓形、工艺、纹样讲到馆藏与当代转译。品牌贯穿各页；顶栏导航、滚动进度条、页脚与浅色段顶栏切换为全站共用。布局按 PC 宽屏设计（约 1200px 起），不依赖外网 CDN，字体与动画库均本地加载。

站点共七页，浏览路径为：门户 → 溯源 → 廓形 → 工艺 → 纹样 → 风华 → 今生。每页约五个模块，动效互不雷同。

---

一、项目功能详细介绍

1. 门户（index.html）

展览入口与品牌首屏，建立「衣架—衣间」的阅读隐喻，再分流到六个专题页。

• 首屏：全幅旗袍氛围图 + 品牌名「衣韵」与副题「一袭见风华」；主按钮进入衣架导航，次按钮直达溯源。
• 量尺立论：图文对照说明「衣先贴着身体」；滚动时量尺刻度推进，强化裁缝台语境。
• 六个衣间（衣架）：横向挂衣式导航，对应溯源、廓形、工艺、纹样、风华、今生；滚动推动衣架前移，可点击进入对应章节。
• 盘扣收束：以盘扣特写讲「整袭衣的收束」，作为进入展览前的仪式感段落。
• 衣橱开门：收束门户，提示展览由此开始，并导向专题页。

2. 溯源（origin.html）

讲旗袍如何随时代改写外形与语境。

• 首屏：立论「从袍服，看见时代」。
• 时代揭页：四幕叠层（清·袍服 → 民初 → 沪上盛期 → 当代回响）；滚动 scrub 年份；画面以虹膜式裁剪切换，文案先隐后显，避免叠字。
• 显影：暗房式显影叙事，强调旗袍作为被留下的时代痕迹。
• 停靠处：街巷、舞厅、相册等场景卡片，说明衣出现之处即时代停靠处。
• 页尾桥接：导向廓形页，提示继续看线条。

3. 廓形（silhouette.html）

从中轴与部件读懂旗袍轮廓，再到步态与开衩。

• 首屏：「一条线，托起整个人」。
• 中轴：左右帘幕开合，立领与开衩落在同一中轴上的舞台叙事。
• 四点：自上而下扫描领、袖、腰、衩等部位，把轮廓读一遍。
• 步态与开衩：用开衩/步幅关系表现「长度决定步伐，开衩决定风」。
• 页尾桥接：导向工艺页。

4. 工艺（craft.html）

从认料到针路与滚边，展示成衣手艺节奏。

• 首屏：「一针落下，风华才生」。
• 认料落剪：百叶窗式步骤（如辨光泽等），滚动切换步骤与配图说明。
• 针路四停：选料、裁形、盘扣、滚边等节点横向滑移，图文同进同出，构成一条针路。
• 滚边：边缘线缝式动效，强调滚边决定衣身「呼吸」。
• 页尾桥接：导向纹样页。

5. 纹样（motif.html）

讲纹样的秩序、意象与留白。

• 首屏：「纹样，是会说话的风华」。
• 中轴镜像：自中心向外的裁剪展开（非简单缩放），表现对称秩序。
• 印记词库：四枚戳印式条目，点出常见纹样意象与说法。
• 留白：说明复杂故事不必填满，用虚实对比收束纹样叙事。
• 页尾桥接：导向风华展厅。

6. 风华（gallery.html）

馆藏式观展：先读题签，再近看作品与细节。

• 首屏：「让目光穿过衣褶」。
• 题签堆叠：多层题签叠入，培养「先读签再靠近」的观展习惯。
• 展厅推近：作品画面随滚动由远及近、分层出现，不一次铺满。
• 细节放大：扣眼、滚边等局部聚焦（放大镜式观看）。
• 页尾桥接：导向今生页。

7. 今生（today.html）

把传统裁法接到当代语境，并给出可继续参与的行动提示。

• 首屏：「衣，仍在继续生长」。
• 语境对切：左右/分区遮罩，表现裁的逻辑换一种语境。
• 生长格阵：多格图文（如都市同行等），表现旧方法长出新形状。
• 行动轨：文字轨道式引导（进入日常等），不以大图卡片堆砌。
• 页尾收束：整站叙事收束，强调风华仍在。

全站共用能力

• 顶栏品牌、章节链接、滚动进度指示。
• 页脚与章节间文案桥接。
• 浅色内容段时顶栏自动适配对比度。
• 资源本地化：Noto 中文字体分包、GSAP 与 ScrollTrigger 均放在站内，便于离线演示与作业提交。

---

二、标准目录和备注

homework-qipao-html-gsap/
├── index.html                 门户页
├── origin.html                溯源页
├── silhouette.html            廓形页
├── craft.html                 工艺页
├── motif.html                 纹样页
├── gallery.html               风华页
├── today.html                 今生页
├── README.md                  项目说明（功能与目录）
├── 演示材料/
│   └── 演示视频.mp4           演示用录屏素材
└── assets/
    ├── css/
    │   ├── public.css         全站壳层：色板、顶栏、页脚、通用排版与浅色段适配
    │   ├── home.css           门户专用样式
    │   ├── origin.css         溯源专用（时代叠层、显影、相册等）
    │   ├── silhouette.css     廓形专用（中轴帘幕、部位扫描、步态）
    │   ├── craft.css          工艺专用（认料百叶、针路横滑、滚边）
    │   ├── motif.css          纹样专用（镜像裁剪、印记、留白）
    │   ├── gallery.css        风华专用（题签、展厅推近、细节聚焦）
    │   └── today.css          今生专用（对切、生长格、行动轨）
    ├── js/
    │   ├── public.js          全站脚本：导航、进度条、浅色段顶栏、公共工具（QipaoSite）
    │   ├── home.js            门户滚动叙事与衣架等动效
    │   ├── origin.js          溯源年份 scrub、虹膜切换与文案淡入淡出等
    │   ├── silhouette.js      廓形帘幕、部位扫描、开衩步态
    │   ├── craft.js           工艺步骤、针路横滑、滚边缝线
    │   ├── motif.js           纹样镜像、印记、留白
    │   ├── gallery.js         题签堆叠、展厅推近、细节放大
    │   └── today.js           对切遮罩、生长格、行动轨
    ├── fonts/
    │   ├── fonts.css          本地字体声明（思源宋/黑分包引用）
    │   ├── nf-*.woff2         Noto Sans SC 分包字体文件
    │   └── ns-*.woff2         Noto Serif SC 分包字体文件
    ├── vendor/
    │   ├── gsap.min.js        GSAP 核心（本地）
    │   └── ScrollTrigger.min.js  滚动触发插件（本地）
    └── images/
        ├── public/            全站共用图（如页脚、通用装饰）
        ├── home/              门户：首屏、量尺、六衣间门扉、盘扣、衣橱等
        ├── origin/            溯源：时代幕图、显影、街巷舞厅相册等
        ├── silhouette/        廓形：中轴、部位、步态相关图
        ├── craft/             工艺：认料步骤、针路节点、滚边等
        ├── motif/             纹样：镜像主图、印记、留白等
        ├── gallery/           风华：题签、展品、细节特写等
        └── today/             今生：对切、生长格阵、行动相关图

获取完整源码

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