Sirex - 创意即将推出模板 preview 1

Sirex - 创意即将推出模板

bookmark

Sirex 是一款创意「即将上线」页面模板，提供全屏幻灯片、单一背景图、YouTube 视频背景三种英雄区风格，并可选配飞鸟、星空、线条三种动画特效。内置倒计时、联系表单、MailChimp 订阅功能，适合产品发布前预热页面使用。

HTMLagencybootstrapcleancoming sooncountdowncreativelanding page

项目简介

Sirex 是一款创意「即将上线」页面模板，提供全屏幻灯片、单一背景图、YouTube 视频背景三种英雄区风格，并可选配飞鸟、星空、线条三种动画特效。内置倒计时、联系表单、MailChimp 订阅功能，适合产品发布前预热页面使用。

技术栈

  • HTML5 + CSS3（响应式布局）
  • jQuery（DOM 操作与交互）
  • PHP（联系表单与邮件订阅后端）
  • Slick Slider（全屏轮播）
  • fullPage.js（单页滚动）
  • Magnific Popup / Lity（图片/视频弹窗）
  • Owl Carousel（作品集轮播）
  • Ionicons（图标字体）

项目结构

text
Sirex-v1-0-Template/
├── index-*.html          # 6 种首页变体
├── contact.php           # 联系表单处理
├── subscribe.php         # MailChimp 订阅
├── css/
│   ├── style.css         # 主样式表
│   └── plugins.css       # 第三方插件样式
├── js/
│   ├── sirex.js          # 核心交互逻辑
│   └── plugins*.js       # 动画效果脚本
├── img/
│   ├── logo.png          # Logo
│   ├── background/       # 5 张背景图 + 视频封面
│   └── works/            # 4 张作品展示图
├── fonts/                # Ionicons 字体
└── mailchimp/inc/        # MailChimp SDK

核心文件说明

  • index-*.html — 首页变体，按英雄区效果命名（BIRDS/STARS/LINES/VIDEO 等）
  • css/style.css — 主样式表，定义暗色主题、按钮、动画等全部视觉样式
  • js/sirex.js — 核心交互，含文字轮播、倒计时、粒子动画等业务逻辑
  • contact.php — 处理访客留言表单，发送至指定邮箱
  • subscribe.php — MailChimp 订阅集成，需填入 API Key 和 List ID
  • mailchimp/inc/MailChimp.php — MailChimp PHP SDK

快速开始

  1. 直接用浏览器打开 Sirex-v1-0-Template/index-SINGLE-IMAGE.html 预览效果
  2. 若需联系表单或订阅功能，需在 PHP 环境中运行（如本地 phpStudy 或线上服务器）
  3. 编辑 contact.php 中的 $myemail，以及 subscribe.php 中的 API Key 和 List ID

使用建议

  • 选择最接近需求的 HTML 变体作为入口，按注释修改 Logo、倒计时时间、社交链接等内容
  • 动画特效（飞鸟/星空/线条）为额外选项，无需时替换为对应无特效版本即可
help_outline

常见问题