
Flyex - Creative Coming Soon Template
# 项目简介
Flyex 是一款创意"即将上线"(Coming Soon)页面模板,提供 7 种背景变体,支持单图、幻灯片轮播、YouTube/Vimeo/HTML5 视频背景以及 Ken Burns 动画效果。内置倒计时器、社交图标区和 MailChimp 邮件订阅功能,适合产品发布、活动宣传或网站维护页使用。
## 技术栈
- HTML5 + CSS3 + 原生 JavaScript
- jQuery 1.x + jQuery Easing 插件
- Slick 轮播插件
- MailChimp API(PHP 后端订阅接口)
- Google Fonts(Raleway)+ Ionicons 图标字体
## 项目结构
```
flyexhtml-10/
├── Flyex-v1-0-Template/
│ ├── index-*.html # 7 种背景变体页面
│ ├── subscribe.php # MailChimp 订阅接口
│ ├── css/
│ │ ├── style.css # 主体样式
│ │ └── plugins.css # 第三方插件样式
│ ├── fonts/ # Ionicons 字体文件
│ ├── img/ # 背景图与 Logo
│ ├── js/
│ │ ├── flyex.js # 交互逻辑
│ │ └── plugins.js # Slick 等插件配置
│ └── mailchimp/inc/ # MailChimp SDK
└── Flyex-v1-0-Documentation/
└── index.html # 官方文档
```
## 核心文件说明
- `index-*.html` — 不同背景类型的入口页面,可按需选用
- `css/style.css` — 核心样式表,定义布局、动画、响应式断点
- `css/plugins.css` — Slick 轮播插件的样式覆盖
- `js/flyex.js` — 倒计时器、页面切换、动画触发等交互实现
- `subscribe.php` — MailChimp 订阅接口,需填入 API Key 与 List ID
- `mailchimp/inc/MailChimp.php` — MailChimp PHP SDK
## 快速开始
1. 根据需求选择合适的 `index-*.html` 作为入口(默认双击打开即可预览)
2. 若使用邮件订阅功能,编辑 `subscribe.php` 填入自己的 MailChimp API Key 和 List ID
3. 本地调试建议使用本地服务器(如 Live Server)以确保视频和脚本正常加载
## 使用建议
模板中的背景图片位于 `img/` 目录,替换时保持相同文件名即可自动切换;倒计时目标日期在 `js/flyex.js` 中配置,找到对应注释修改即可。
help_outline
FAQ
Comments0
PublishedJan 20, 2026
Tech Stack
HTML