设计机构官网模板 | Masonry 作品集 + 视差滚动，全中文开箱即用

jQuery + Masonry + PhotoSwipe 打造的设计机构作品集官网模板。视差滚动 + 瀑布流画廊 + 视频灯箱，全中文文案，改图即上线。

设计机构的官网，本身就是最能说服客户的作品。这套模板把视差滚动 Hero、瀑布流作品画廊、全屏图片灯箱、视频播放、客户墙与评价轮播全部配齐，并已将页面文案完整汉化——你只需替换作品图与机构信息，半天即可拥有一个气质完整的品牌官网。

模板亮点

1. 九大区块，开箱即用

Preloader 加载动画、侧滑全屏导航、视差 Hero、About 机构介绍、Services 服务矩阵、Works 作品瀑布流、Clients 客户墙、Testimonials 评价轮播、Contact 联系区一应俱全，页面结构无需重构。

2. 视差滚动 Hero 主视觉

• parallax.js 全屏视差：大图随滚动缓慢位移，配合网格遮罩营造纵深感
• 视频灯箱：点击「观看视频」以 lity 弹出 Vimeo 播放页，无需跳转离开
• 双 CTA + 滚动提示：引导用户深入浏览，不浪费首屏任何一寸注意力

3. Masonry 瀑布流作品画廊

• 级联网格布局：Masonry v4 + imagesLoaded 自动排布，图片高矮错落不破版
• PhotoSwipe 全屏画廊：点击作品放大查看，支持分享、全屏、缩放、键盘翻页
• 2x 高清适配：srcset 自动加载 @2x 高清图，Retina 屏不模糊

4. AOS 滚动动画体系

全站区块随滚动 fade-up 渐次入场；800ms smoothscroll 平滑锚点定位，滚动体验整体丝滑。

5. 信任感组件齐全

• 客户墙：Uber / Spotify / Google / Apple 等 12 家客户标识一字排开
• slick 评价轮播：三条客户证言自动轮播，气质拿捏

6. 细节动画点缀

三点跳动 Preloader、回到顶部按钮、导航社交链接侧栏，小交互均为成品状态，无需二次打磨。

技术栈

技术	版本	用途
jQuery	3.2.1	DOM 操作与插件编排
parallax.js	1.4.2	Hero 视差滚动
Masonry + imagesLoaded	4.2.0 / 3.2.0	作品瀑布流布局
PhotoSwipe	4.x	全屏图片画廊
AOS	2.x	滚动入场动画
lity	2.x	视频灯箱
slick	1.8	评价轮播
Font Awesome + micons	—	社交与线性图标

项目结构

Sublime_template/
├── index.html              # 页面结构（全中文文案）
├── css/
│   ├── base.css            # 基础重置与通用样式
│   ├── vendor.css          # 插件样式
│   ├── main.css            # 主题样式与响应式
│   └── micons / font-awesome  # 图标字体
├── js/
│   ├── jquery-3.2.1.min.js # jQuery 基础库
│   ├── modernizr.js        # 特性检测
│   ├── plugins.js          # 全部插件打包（parallax / Masonry / PhotoSwipe / AOS / lity / slick）
│   └── main.js             # 页面交互编排
└── images/                 # hero 背景 / 作品图（含 @2x 高清版）

快速开始

# 无需安装任何依赖，直接用浏览器打开即可
open index.html

# 或使用任意静态服务器
npx serve .

部署：将整个目录上传至 Vercel / Netlify / GitHub Pages / 虚拟主机等任意静态托管即可。

二次开发指南

需求	操作
更换 Hero 背景	替换 images/hero-bg.jpg 即可
更换作品	替换 images/portfolio/ 下同名图片（含 @2x 与 gallery 放大版）
修改文案	直接编辑 index.html 中的中文文案
更换主题色	修改 css/main.css 中的品牌色定义
增删服务项	复制 item-service 结构即可
更换评价	修改 testimonials__slide 内的证言与作者

适用场景

设计代理机构、品牌与视觉工作室、创意热店、自由设计师作品集、广告公司、摄影机构，也可作为高质感作品集模板用于任何需要展示案例库的团队。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	2~3 周起	半天上线
画廊体验	需选型调试	瀑布流 + 全屏灯箱开箱即用
动画体系	需逐区块编排	AOS + smoothscroll 已配齐
中文文案	需自行撰写	全站已汉化
维护成本	自行承担	插件打包清晰，改文件即生效

在线预览

将整个目录部署至 Vercel / Netlify / GitHub Pages 等任意静态托管即可在线访问。

http://case.fedshare.cn/sublime_temp