Project Overview
Flyex is a creative "Coming Soon" page template offering 7 background variants, supporting single images, slideshow carousels, YouTube/Vimeo/HTML5 video backgrounds, and Ken Burns animation effects. It includes a built-in countdown timer, social icon area, and MailChimp email subscription functionality, suitable for product launches, event promotions, or website maintenance pages.
Tech Stack
- HTML5 + CSS3 + Vanilla JavaScript
- jQuery 1.x + jQuery Easing Plugin
- Slick Carousel Plugin
- MailChimp API (PHP backend subscription interface)
- Google Fonts (Raleway) + Ionicons Icon Font
Project Structure
flyexhtml-10/
├── Flyex-v1-0-Template/
│ ├── index-*.html # 7 background variant pages
│ ├── subscribe.php # MailChimp subscription interface
│ ├── css/
│ │ ├── style.css # Main styles
│ │ └── plugins.css # Third-party plugin styles
│ ├── fonts/ # Ionicons font files
│ ├── img/ # Background images and Logo
│ ├── js/
│ │ ├── flyex.js # Interaction logic
│ │ └── plugins.js # Slick and other plugin configurations
│ └── mailchimp/inc/ # MailChimp SDK
└── Flyex-v1-0-Documentation/
└── index.html # Official documentation
Core File Description
index-*.html— Entry pages with different background types, choose as neededcss/style.css— Core stylesheet defining layout, animations, responsive breakpointscss/plugins.css— Slick carousel plugin style overridesjs/flyex.js— Countdown timer, page switching, animation triggers and other interactionssubscribe.php— MailChimp subscription interface, requires API Key and List IDmailchimp/inc/MailChimp.php— MailChimp PHP SDK
Quick Start
- Select the appropriate
index-*.htmlas your entry point based on requirements (double-click to preview by default) - To use the email subscription feature, edit
subscribe.phpwith your own MailChimp API Key and List ID - For local development, it's recommended to use a local server (such as Live Server) to ensure videos and scripts load properly
Usage Tips
Background images in the template are located in the img/ directory; replacing them with the same filename will automatically update the display. The countdown target date is configured in js/flyex.js — find the corresponding comment and modify it accordingly.
