品牌故事单页模板 | 全屏滚动时间轴叙事，纯静态 HTML 开箱即用

基于 jQuery + Swiper + swiper.animate 打造的品牌叙事单页模板。一个 HTML 文件承载整站，开箱即用。

讲好一个品牌，有时只需要一页。这套模板用 Swiper 全屏分页滚动承载品牌叙事：每一屏一个章节，配合逐屏入场动画与”公元 120 年 → 1877 年 → 1962 年”式的时间轴结构，把企业历史、工艺传承、里程碑一气呵成地讲完。单文件、零构建，适合发布会、展会大屏、品牌专题等一切”一页讲完”的场景。

模板亮点

1. 全屏分页滚动叙事

整站为 Swiper 全屏滚动结构，一屏一章节，滚动即翻页，叙事节奏完全可控——品牌历史、产品演进、荣誉里程碑逐屏展开。

2. 时间轴叙事结构

内置品牌时间轴章节（历史沿革示例：公元 120 年起源 → 1877 年 → 1962 年发展节点），照此结构替换即可讲述任何品牌的发展史。

3. 逐屏入场动画

基于 swiper.animate 实现每屏元素错落进场，文字、图片按节奏浮现，无需额外动画库。

4. 单文件极轻量

整站仅 1 个 HTML 文件，加载快、分发易：链接即达、U 盘可拷、大屏可放，运维成本为零。

技术栈

技术	用途
HTML5 / CSS3	页面结构与样式
jQuery	DOM 操作与交互
Swiper	全屏分页滚动
swiper.animate	逐屏入场动画
animate.css	CSS 动画库
normalize.css	样式重置

项目结构

jssn/
├── index.html   # 全屏滚动品牌叙事单页（整站）
├── css/         # animate + fullPage + normalize + 样式
├── js/          # jQuery / Swiper / swiper.animate
├── fonts/       # 品牌字体
└── img/         # 品牌素材

快速开始

纯静态模板，无需安装依赖：

# 方式一：直接双击 index.html 即可浏览

# 方式二：使用本地静态服务器（推荐）
npx serve .

二次开发指南

需求	操作
更换品牌	替换 img/ 素材与页面文案即可
增删章节	复制任一 swiper-slide 屏区块，改内容即得
调整入场动画	修改元素上的 ani 动画 class 与时长
改时间轴节点	替换年份与事件文案，结构不变
调整配色	css/style.css 集中管理，一处修改全站生效

适用场景

品牌故事专题页、企业历史 / 周年庆页面、新品发布会单页、展会大屏循环页、招商引资介绍页、个人作品集单页，也可作为任何”一页讲完”的轻量叙事场景。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	1~2 周起	半天上线
滚动结构	需反复调优	全屏分页框架已成型
动画品质	需自行实现	逐屏入场动画开箱即用
运维成本	自行承担	单文件零依赖，即传即用

在线预览

单 HTML 文件，上传至任意静态托管、扫码即达的短链落地页，或直接投放在展会大屏循环播放。

http://8.166.93.126:8989/jssn