Asli – AJAX 作品集 HTML5 模板

# 项目简介 Asli 是一款面向创意工作者的 AJAX Portfolio HTML5 模板，支持页面无刷新切换、GSAP 滚动动画、WebGL 遮罩效果以及响应式布局。内置预加载器、自定义光标跟随和 Photoswipe 图片灯箱，适合搭建高端作品集网站。 ## 技术栈 - HTML5 / CSS3（Sass） - JavaScript（原生） - Gulp（构建工具） - GSAP（GreenSock）— ScrollTrigger、ScrollToPlugin、MorphSVGPlugin - Photoswipe（图片灯箱） ## 项目结构 ``` aslihtml-10/ ├── HTML/ │ ├── index.html # 主入口页面 │ ├── css/ │ │ ├── main.css # 主题样式（162 个模块） │ │ └── vendor.css # 第三方库样式 │ └── js/ │ └── app.js # 核心应用逻辑与配置 ├── SOURCE/ │ ├── gulpfile.js # Gulp 构建配置 │ └── package.json # 依赖声明 └── Documentation/ └── index.html # 文档跳转页 ``` ## 核心文件说明 - `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 等第三方组件的样式 ## 快速开始 **方式一：直接预览（已编译好的 HTML）** 在浏览器中打开 `HTML/index.html` 即可查看效果。 **方式二：本地开发** ```bash cd aslihtml-10/SOURCE npm install gulp default # 访问 http://localhost:3000/ ``` ## 使用建议 该模板每个 HTML 页面均为独立完整结构，WebGL 版本与非 WebGL 版本（如 `02-01-01` 与 `02-01-02`）提供渐进增强选择。实际部署时建议根据目标性能选择合适的动画方案。