基于 jQuery + Swiper + WOW.js 打造的区块链代币品牌单页模板。开箱即用，替换品牌素材即可上线。
一个代币项目的移动端门面，要在手机上把”项目是什么、技术底座、路线图、代币分配、如何参与”一次讲清，还要有足够的动效质感撑住品牌形象。这套模板以 Krugerrand Coin（KRG）为原型，用黑金视觉与全屏轮播动画把代币官网的完整叙事做成单个 HTML 页面，替换素材与英文文案即可换成任意代币或品牌项目上线。
模板亮点
1. 八大区块完整品牌叙事
- Home：全屏 Banner 轮播（两屏主视觉，Swiper 前后箭头导航）
- Profile：What Is Krugerrand Coin 项目介绍轮播（分页切换）
- 项目详情：KRG 定位介绍 + 三图轮播展示
- KRG Scenarios：六大应用场景圆形图标卡轮播（激励创作 / 付费问答 / 内容投票 / DAO / 互动打赏 / 社区广告）
- Technology：基于以太坊 ERC20 标准的技术说明
- Roadmap：2018 ~ Future 三阶段路线图时间线
- Token Distribution：2100 万总量分配（社区 / 基金会 / 机构售卖）
- Contact：邮箱订阅表单 + 社交入口 + 版权
2. 四组轮播 + 动画分组的进阶动效方案
页面同时运行 4 个 Swiper 实例，并为每组轮播分配独立 WOW 动画类（wow_banner / wow_swiper2 / wow_swiper3 / wow_swiper4）：每次 slide 切换时只重新触发当前组内的 slideInLeft / slideInRight / rubberBand / fadeInUp 动画，实现”每翻一屏重播一次入场动效”的高级效果，这是本模板最具复用价值的技术方案。
3. 全屏菜单层
右上角菜单按钮唤起全屏黑色菜单（jQuery slideDown / slideUp），锚点直达六大区块（Home / Profile / Technology / Roadmap / Token / Contact），另带 Registration / Login 入口与 Whitepaper 白皮书按钮，点击菜单项自动收起，移动端导航体验完整。
4. 滚动触发动画
WOW.js 监听滚动位置，各区块元素按 data-wow-delay 节奏依次入场（左入标题、右入图片、上入正文），滚动浏览全程有反馈；对 IE6~9 自动降级跳过动画，兼容性稳健。
5. 移动端 H5 适配 + 黑金品牌视觉
- 页面宽度 320px ~ 640px 自适应，禁止缩放，针对小屏（≤320px）与矮屏（≤570px 高）做了双重媒体查询微调
- 纯黑背景 + 白色文字 + 品红 / 金色点缀的数字货币经典配色，替换
img/品牌切图即可整体换肤
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| jQuery | 1.7.2 | DOM 操作 / 菜单层动画 |
| Swiper | 4.0.5 | 四组内容轮播 |
| WOW.js | 1.0.1 | 滚动触发 / 轮播切换触发动画 |
| animate.css | — | CSS3 动效库 |
| normalize.css | — | 样式重置 |
项目结构
krg/
├── index.html # 单页入口（8 大区块 + 全屏菜单层）
├── css/
│ ├── style.css # 主样式（黑金主题，品红 #f123dd 点缀）
│ ├── animate.css # CSS3 动效库
│ └── swiper.min.css
├── js/
│ ├── jquery.js # jQuery 1.7.2
│ ├── swiper.min.js # Swiper 4.0.5
│ ├── wow.min.js # WOW.js 1.0.1
│ └── global.js # 公共脚本
└── img/ # 全套品牌视觉切图（Banner / 场景图标 / 背景图）快速开始
纯静态模板，无需构建：
# 方式一：浏览器直接打开
双击 index.html 即可浏览
# 方式二：本地静态服务器
python3 -m http.server 8080
# 访问 http://localhost:8080/
# 方式三：VS Code Live Server 插件，右键 index.html → Open with Live Server建议在 Chrome 设备模拟（手机视图）下预览，以获得真实移动端效果。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换品牌 | 替换 img/ 下 logo、Banner、场景图标、背景图等切图，同名覆盖 |
| 修改文案 / 链接 | 直接编辑 index.html 内英文文案与 href；菜单锚点对应 #F1 ~ #F6 |
| 更换主题色 | 修改 css/style.css 中的 #f123dd / #cc21d7（品红点缀色）与 #000 黑底 |
| 中文化 | 页面文案均为英文直排，逐段替换为中文即可，黑金版式不受影响 |
| 增删区块 | 复制一段 <div class="rN-cn"> 区块修改，并在菜单层补锚点 |
适用场景
区块链代币 / 数字货币项目 H5 官网、币圈项目白皮书宣传页、Web3 品牌 Anchor 页、交易所代币介绍页，也可作为黑金风格的品牌 H5 单页用于任何高端产品宣传。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 1~2 周起 | 换图换文案，1 天上线 |
| 页面还原度 | 需与设计反复走查 | 代币官网八大区块叙事现成 |
| 交互与动画 | 多轮播共存易冲突 | 4 组轮播 + 分组动画重播已调通 |
| 移动端适配 | 需单独调试 | H5 适配 + 小屏 / 矮屏双重微调 |
| 维护成本 | 自行承担 | 单文件结构，改图即可迭代 |
在线预览
纯静态模板，将整个目录部署至任意静态托管（GitHub Pages / OSS / 云虚拟主机等）即可在线访问。
评论0