纸境 · 中国剪纸数字展览

纸境 · 中国剪纸数字展览

本项目是一套以滚动浏览为主的中国剪纸数字展览网站。访问者通过页面滚动推进叙事，了解剪纸的历史、工艺、纹样、地域风格、馆藏观看方式，以及当代转译与新生可能。站点由首页与六个专题内页组成，页面之间通过主导航与文末引导互相跳转。

---

一、各页面功能

1. 首页（index.html）

站点入口与总览。用五段连续滚动场景建立展览语气，并引导进入各专题。

主要功能：

• 展示品牌与主题「一纸见万象」，建立第一印象。
• 用「先被折起，才有被展开的可能」点明剪纸与折叠、展开的关系。
• 通过「折起、剪开、再展开」引出四条专题入口（溯源、工艺、纹样、地域）。
• 介绍「纸的背面也有风景」，并引导进入馆藏。
• 文末收束并引导从溯源继续观看。

---

2. 溯源页（origin.html）

讲述剪纸如何进入日常、如何与时间与节令相连。

主要功能：

• 首屏提出「从窗前，看见时间」。
• 以横向时间卷轴呈现不同年代：纸进入日常、窗前节令、乡土百景、当代观看。
• 说明剪纸不只是装饰，而是被看见的日常与祝愿。
• 介绍纸被贴上的场合（门窗、婚嫁、祝寿等）及其意义。
• 文末引导进入工艺页，继续了解刀路与手法。

---

3. 工艺页（craft.html）

讲解剪纸制作中的观察、停顿与材料感受。

主要功能：

• 首屏提出「一刀落下，万象才生」。
• 「先看纸，再落刀」：强调动手前先认识纸，并用滚动展开工作台画面。
• 「四个停顿」：分步说明看纸、起稿、行刀、展纸。
• 「一张纸的边缘，决定作品的呼吸」：强调材料边界与作品观感的关系。
• 文末引导进入纹样页。

---

4. 纹样页（patterns.html）

说明纹样如何通过折叠、对称、连接与留白传递祝愿。

主要功能：

• 首屏提出「纹样，是会说话的祝愿」。
• 「一条中轴，生出两面的世界」：表现折叠与对称带来的秩序。
• 以若干常见意象（如福、囍、鱼、花、鸟、龙）说明寓意与留白。
• 「复杂的故事，从不必填满」：强调空白与呼吸感同样重要。
• 文末引导进入地域页，看同一纹样在不同地方的语气差异。

---

5. 地域页（regions.html）

呈现不同地区剪纸的风格差异与生活来源。

主要功能：

• 首屏提出「同一张纸，不同的乡音」。
• 「不是地图，是不同的纸上语气」：并列出陕北、蔚县、扬州、潮州等停靠点及其气质。
• 「风格被生活一层层压进纸里」：用层次化方式概括粗犷、细刻、华彩等风格线索。
• 「让不同的乡音，停在同一张纸上」：收束地域差异与共同材料。
• 文末引导进入馆藏页。

---

6. 馆藏页（gallery.html）

模拟展览观看节奏：先读题签，再靠近作品，最后注视细节。

主要功能：

• 首屏提出「让目光穿过纸的背面」。
• 「先读题签，再慢慢靠近」：先给出作品名录与观看提示。
• 「画面并不急着一次出现」：以分件出现的方式引导逐件观看。
• 「刀口、纸纤维，都留在背面」：引导关注手工与材料痕迹，而不只看正面图案。
• 文末引导进入新生页。

---

7. 新生页（future.html）

讨论剪纸方法如何进入当代材料、媒介与日常行动。

主要功能：

• 首屏提出「纸，仍在继续生长」。
• 「剪的逻辑，正在换一种材料」：说明连接、留白、对称可以迁移到新语境。
• 「旧方法，正在长出新形状」：以单元阵列呈现当代转译意象。
• 「让纸上的方法，继续参与今天」：给出进入器物、进入屏幕、回到相聚等行动方向。
• 文末可回到首页，形成完整观看闭环。

---

二、全站共通能力

各页均具备以下共通体验：

• 顶部固定导航：可在首页与各专题间切换；当前页有明确标识。
• 滚动驱动的观看节奏：关键段落在滚动中展开、停留、再继续，而不是一次性铺满信息。
• 文末引导：每页结束时提供下一主题入口，形成连续观展路径。
• 页脚：展示站点名称与「数字展览」身份说明。

---

三、建议观看路径

首页 → 溯源 → 工艺 → 纹样 → 地域 → 馆藏 → 新生 → 回到首页

也可通过导航直接进入任一专题，不强制线性阅读。

---

四、标准文件目录

homeWork-jianzhi-gsap-html/
├── index.html                 首页
├── origin.html                溯源页
├── craft.html                 工艺页
├── patterns.html              纹样页
├── regions.html               地域页
├── gallery.html               馆藏页
├── future.html                新生页
├── 项目说明.md                本说明文档
├── 演示文件/                  演示素材（如演示视频）
└── assets/                    静态资源根目录
    ├── css/                   样式
    │   ├── public.css         内页共用样式（导航、首屏、尾部等）
    │   ├── home.css           首页样式
    │   ├── origin.css         溯源页样式
    │   ├── craft.css          工艺页样式
    │   ├── patterns.css       纹样页样式
    │   ├── regions.css        地域页样式
    │   ├── gallery.css        馆藏页样式
    │   └── future.css         新生页样式
    ├── js/                    脚本
    │   ├── public.js          内页共用逻辑（导航状态、通用滚动辅助等）
    │   ├── home.js            首页滚动交互
    │   ├── origin.js          溯源页滚动交互
    │   ├── craft.js           工艺页滚动交互
    │   ├── patterns.js        纹样页滚动交互
    │   ├── regions.js         地域页滚动交互
    │   ├── gallery.js         馆藏页滚动交互
    │   └── future.js          新生页滚动交互
    ├── images/                图片（按模块分子目录）
    │   ├── public/            全站共用图（如标志）
    │   ├── home/              首页专用图
    │   ├── origin/            溯源页主图
    │   ├── craft/             工艺页主图
    │   ├── patterns/          纹样页主图
    │   ├── regions/           地域页主图
    │   ├── gallery/           馆藏页主图
    │   └── future/            新生页主图
    └── vendor/                第三方库（动画引擎及相关插件）

说明：

• 每个专题页对应独立的 HTML、CSS、JS，便于单独维护。
• public 目录存放多页共用的样式、脚本与图片。
• 图片按模块分文件夹；若某页需要引用其他模块的图，直接使用对应模块路径，不重复拷贝。
• vendor 仅存放第三方依赖，不参与业务内容编写。

获取完整源码

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