纯 HTML + CSS + 原生 JavaScript 打造的摄影师作品集官网模板。零框架、零构建、零依赖，双击即开，改图即上线。
对摄影师与视觉创作者而言，官网就是作品的一部分。但大多数摄影站模板要么动画粗糙、千站一面，要么绑定重型框架、改一行要构建半天。这套模板用原生技术把全屏切片轮播、进度环倒计时、服务选项卡、时间线等交互全部做完——你不写一行 JS，替换图片与文案即可获得一个暗黑科技感的个人品牌官网。
模板亮点
1. 六大区块，开箱即用
固定导航（滚动高亮 + 移动端汉堡菜单）、Hero 全屏轮播、Services 服务选项卡、About 时间线与数据统计、Contact 联系表单、Footer 多列页脚一应俱全，页面结构无需重构。
2. 专业级 Hero 轮播系统
- 切片式全屏切换：大图按列切片依次翻转，告别生硬的左右平移
- 进度环倒计时：环形进度条直观展示当前画面剩余时长，到点自动切下一张
- 四种导航方式：缩略图、圆点、前后箭头、键盘方向键，任选其一
- 播放 / 暂停按钮：讲解作品时可随时定格
- 悬停暂停：鼠标移入自动轮播即停，移出恢复
- 文字覆盖层动画：每张作品的标题与描述随切换淡入淡出
- resize 自适应：窗口缩放后切片宽度自动重算，不错位
3. 服务选项卡 + 创作者叙事区块
- Services 三选项卡：摄影采集 / 极境远征 / 典藏印刷，点击即切换整套服务介绍与特性清单
- 时间线叙事：2009 → 2024 四个人生节点，讲述职业轨迹
- 技术能力卡：AI 气象引擎、卫星遥测、精密云台三张技术名片
- 数据统计墙：47 座国家公园、2.3M 英里行程、-40°C 工作低温、99.7% 满意率
4. 内置 SVG 图标系统
17 个手绘线性图标（相机、山脉、卫星、印刷、社媒等）全部内联在页面 SVG sprite 中，不依赖任何 icon 字体，颜色随主题色自动继承。
5. 暗黑科技感视觉
#ff3366 品红主色 + 纯黑背景，叠加 48px 网格线与径向光晕两层氛围背景；显示字体 Orbitron × 正文字体 DM Sans，科技感与可读性兼得。
6. 轻量高性能
零框架、零构建、零第三方依赖（仅引用 Google Fonts），全站原生 CSS/JS，动画仅使用 transform / opacity 触发 GPU 加速，加载快、Lighthouse 轻松高分。
技术栈
| 技术 | 用途 |
|---|---|
| HTML5 | 单文件语义化页面结构 |
| CSS3 | Grid / Flex 布局 + CSS 变量 |
| 原生 JavaScript | 轮播 / 选项卡 / 导航交互 |
| Orbitron | 科技感显示字体 |
| DM Sans | 正文字体 |
项目结构
photography_pro/
├── index.html # 单文件页面结构（含 SVG 图标 sprite）
├── templatemo-sleeky-pro.css # 全部样式（:root CSS 变量主题）
├── templatemo-sleeky-scripts.js # 轮播 / 导航 / 选项卡交互
├── icons.svg # 备用图标集
└── images/ # 轮播大图 + 缩略图（Unsplash 素材）快速开始
# 无需安装任何依赖，直接用浏览器打开即可
open index.html
# 或使用任意静态服务器
npx serve .部署：将整个目录上传至 Vercel / Netlify / GitHub Pages / 虚拟主机等任意静态托管即可。
二次开发指南
| 需求 | 操作 |
|---|---|
| 更换作品图 | 替换 images/ 下的大图与缩略图，同名覆盖即可 |
| 修改文案 | 直接编辑 index.html 中的标题、描述与服务介绍 |
| 更换主题色 | 修改 templatemo-sleeky-pro.css 中 :root 的 CSS 变量 |
| 增删轮播图片 | 在 templatemo-sleeky-scripts.js 顶部的 slides 数组中增删条目 |
| 增删服务选项卡 | 复制 service-tab 与 service-content 结构即可 |
| 增删导航项 | 在 nav-menu 列表中增删 <li> 即可 |
适用场景
摄影师个人官网、摄影工作室、旅拍品牌、户外探险团队、影像艺术机构，也可作为暗黑科技风作品集模板用于任何个人品牌站点。
从零自研 vs 使用本模板
| 维度 | 从零自研 | 使用本模板 |
|---|---|---|
| 交付周期 | 1~2 周起 | 半天上线 |
| 轮播品质 | 需反复调优 | 切片动画 + 进度环开箱即用 |
| 交互细节 | 键盘 / 悬停 / resize 需逐一实现 | 全部内置 |
| 构建成本 | 需选型配置 | 零构建，改文件即生效 |
| 维护成本 | 自行承担 | 原生代码，任何人都看得懂 |
在线预览
将整个目录部署至 Vercel / Netlify / GitHub Pages 等任意静态托管即可在线访问。
http://case.fedshare.cn/photography_temp
评论0