项目简介link

Asli 是一款面向创意工作者的 AJAX Portfolio HTML5 模板，支持页面无刷新切换、GSAP 滚动动画、WebGL 遮罩效果以及响应式布局。内置预加载器、自定义光标跟随和 Photoswipe 图片灯箱，适合搭建高端作品集网站。

技术栈link

• HTML5 / CSS3（Sass）
• JavaScript（原生）
• Gulp（构建工具）
• GSAP（GreenSock）— ScrollTrigger、ScrollToPlugin、MorphSVGPlugin
• Photoswipe（图片灯箱）

项目结构link

aslihtml-10/
├── HTML/
│   ├── index.html              # 主入口页面
│   ├── css/
│   │   ├── main.css            # 主题样式（162 个模块）
│   │   └── vendor.css          # 第三方库样式
│   └── js/
│       └── app.js              # 核心应用逻辑与配置
├── SOURCE/
│   ├── gulpfile.js             # Gulp 构建配置
│   └── package.json            # 依赖声明
└── Documentation/
    └── index.html              # 文档跳转页

核心文件说明link

• HTML/index.html — 模板主页面，引入字体、样式和脚本
• HTML/js/app.js — 应用入口，包含 AJAX 导航、动画、灯箱等全局配置
• HTML/css/main.css — 162 个样式模块，覆盖全站 UI 组件
• SOURCE/gulpfile.js — Sass 编译、CSS/JS 压缩、热更新的构建规则
• HTML/css/vendor.css — Photoswipe 等第三方组件的样式

快速开始link

方式一：直接预览（已编译好的 HTML） 在浏览器中打开 HTML/index.html 即可查看效果。

方式二：本地开发

cd aslihtml-10/SOURCE
npm install
gulp default
# 访问 http://localhost:3000/

使用建议link

该模板每个 HTML 页面均为独立完整结构，WebGL 版本与非 WebGL 版本（如 02-01-01 与 02-01-02）提供渐进增强选择。实际部署时建议根据目标性能选择合适的动画方案。