Viex - 创意作品集模板 preview 1

Viex - 创意作品集模板

bookmark

Viex 是一款创意作品集单页 HTML 模板，提供 6 种不同的首页英雄区域（Hero）展示方式：幻灯片轮播、Ken Burns 缩放淡入、YouTube/Vimeo/HTML5 视频背景以及单图版本。适合个人摄影师、设计师、创意从业者快速搭建作品展示网站。

HTML

项目简介

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 环境）

项目结构

text
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 路径。

help_outline

常见问题