Viex - 创意作品集模板

# 项目简介 Viex 是一款创意作品集单页 HTML 模板，提供 6 种不同的首页英雄区域（Hero）展示方式：幻灯片轮播、Ken Burns 缩放淡入、YouTube/Vimeo/HTML5 视频背景以及单图版本。适合个人摄影师、设计师、创意从业者快速搭建作品展示网站。 ## 技术栈 - HTML5 + CSS3（采用 Raleway 字体，IonIcons 图标） - jQuery（负责幻灯片、滚动导航、表单交互等核心逻辑） - Slick Carousel v1.6.0（轮播组件） - Magnific Popup v1.1.0（图片/视频弹窗） - PhotoSwipe（图片画廊） - contact.php（联系表单后端，需 PHP 环境） ## 项目结构 ``` Viex-v1-0-Template/ index-HERO-SLIDESHOW-ZOOM-FADE.html # 幻灯片+Ken Burns效果 index-HTML5-VIDEO.html # 自托管HTML5视频背景 index-KENBURNS-SLIDESHOW.html # Ken Burns缩放淡入 index-SINGLE-IMAGE.html # 单图背景 index-VIMEO-VIDEO.html # Vimeo视频背景 index-YOUTUBE-VIDEO.html # YouTube视频背景 contact.php # 联系表单处理脚本 css/ style.css # 主样式（含35个章节注释） plugins.css # 第三方插件样式 js/ viex.js # 模板核心脚本 plugins.js # 插件初始化配置 img/ # 图片资源 Viex-v1-0-Documentation/ index.html # 官方文档页 assets/ # 文档用CSS/JS ``` ## 核心文件说明 - `css/style.css` — 主样式表，含loader、导航、作品集、时间轴、 testimonials 等35个模块的完整样式 - `js/viex.js` — 核心交互脚本，负责页面初始化与动画逻辑 - `index-*.html` — 6个首页变体，按需选择对应版本修改内容 - `contact.php` — 联系表单处理，将用户提交发送至预设邮箱 - `img/` — 背景图、作品图片等资源，替换时注意路径一致性 - `photoswipe/` — 图片画廊依赖资源，不可删除 ## 快速开始 1. 下载模板后，打开 `Viex-v1-0-Template` 目录 2. 根据需求选择合适的首页版本（如 `index-YOUTUBE-VIDEO.html`） 3. 直接在浏览器中打开 HTML 文件预览效果 4. 联系表单功能需将 `contact.php` 上传至支持 PHP 的服务器，并修改第 4 行 `$myemail` 为实际收件邮箱 ## 使用建议 视频背景版本需要托管在服务器环境下才能正常播放（本地直接打开可能受浏览器安全策略限制）。替换图片时请保持 `img/` 目录结构，或同步修改 CSS 中的 `background-image` 路径。