Suburb - Responsive Coming Soon Page

Suburb - Responsive Coming Soon Page

category移动应用
# 项目简介 The Outskirts 是一套响应式"即将上线"(Coming Soon)页面模板,包含倒计时、联系表单和邮件订阅功能。提供多种背景效果(视频、图片轮播、Ken Burns)和天气氛围(雨、雪、云、粒子),适合网站维护或产品发布前的占位页面。 ## 技术栈 - Bootstrap 3.x(CSS 框架) - jQuery(DOM 操作与交互) - Supersized 3.2.7(背景幻灯片库) - PHP(联系表单与邮件订阅后端) - MailChimp API(邮件列表集成) ## 项目结构 ``` The-Outskirts-v1-1-Template/ ├── index-*.html # 30种首页变体(背景+主题+氛围组合) ├── contact.php # 联系表单处理 ├── subscribe.php # MailChimp 订阅处理 ├── css/ │ ├── bootstrap.min.css # Bootstrap 核心样式 │ ├── style-dark.css # 暗色主题 │ ├── style-light.css # 亮色主题 │ └── font-awesome-4.4.0/ # 图标字体 ├── js/ │ ├── supersized.*.js # 各背景效果的配置脚本 │ └── the-outskirts.js # 主交互逻辑(旋转文字等) └── img/ # 背景图、云/雨/雪等素材 The-Outskirts-v1-1-Documentation/ └── index.html # 官方文档 ``` ## 核心文件说明 - `index-*.html` — 30种模板变体,按背景类型(video/ken-burns/single-image/slideshow/youtube-video)、主题色(dark/light)、氛围(clean/clouds/rain/snow/particles)组合 - `css/style-dark.css` / `style-light.css` — 暗色/亮色主题样式表 - `js/the-outskirts.js` — 主脚本,控制欢迎语轮播等交互 - `js/supersized.*.js` — Supersized 背景引擎的配置,决定使用哪种背景效果 - `contact.php` — 接收联系表单 POST 数据并发送邮件 - `subscribe.php` — 对接 MailChimp API 实现邮件订阅 ## 快速开始 1. 根据需要选择合适的 `index-*.html` 作为 `index.html` 2. 修改页面文字内容(欢迎语、倒计时目标日期等) 3. 替换背景素材(视频、图片)或更新 YouTube 视频 ID 4. 配置联系表单:在 `contact.php` 中设置 `$myemail` 5. 配置订阅功能:在 `subscribe.php` 中填入 MailChimp API Key 和 List ID 6. 将整个目录部署到支持 PHP 的 Web 服务器 如仅本地预览部分效果,可直接用浏览器打开 HTML 文件,但联系表单和订阅功能需服务器环境。 ## 使用建议 - 选择背景类型时考虑页面加载速度,HTML5 视频背景建议控制在 5MB 以内 - 部署前记得将 `contact.php` 和 `subscribe.php` 中的占位符邮箱/密钥替换为真实值,避免表单功能失效
help_outline

FAQ

Comments0
PublishedJan 20, 2026

Tech Stack

HTML