Portfolio-Template-06
HTML / 作品集 · 作者 Muhammad112233-creator
一个以深色电影感为基调的单页作品集模板，使用 GSAP ScrollTrigger、Lenis 平滑滚动和自定义光标，纯 HTML/CSS/JS 实现，无需构建步骤。
模板详细介绍
Portfolio-Template-06 是一个面向设计师、前端开发者和创意工作室的单页作品集模板，整体采用深色电影感视觉风格。它完全由纯 HTML、CSS 和原生 JavaScript 构成，通过 CDN 引入 GSAP 3 与 ScrollTrigger 负责滚动动画，Lenis 提供平滑滚动，不需要安装依赖或执行构建命令，下载后直接用浏览器打开 index.html 即可查看。
模板包含较完整的动效编排：带计数动画的预加载页、磁吸圆点加拖尾圆环的自定义光标（悬停时变为 VIEW 徽标）、逐词与逐字母的滚动显现、旋转的首页标题、服务区的双向图片跑马灯、带视差的数字统计、横向钉住的“My Work”画廊，以及全屏覆盖菜单和旋转圆形文字环。页面还提供 CSS 火焰动画、下落人物视差、撕纸分隔、页脚本地时间与平滑回到顶部等细节。
所有内容集中在一个 index.html 中，样式与脚本分别放在 css/style.css 和 js/main.js，图片资源位于 assets/ 目录，替换同名文件即可换成自己的素材。仓库采用 MIT 许可证，允许个人和商业使用。
主要特点
- 预加载页包含数字计数动画与“点击任意处激活”的进入方式
- 自定义光标由磁吸圆点和拖尾圆环组成，悬停作品时变为 VIEW 徽标
- Lenis 平滑滚动配合 GSAP ScrollTrigger 实现逐词、逐字母的滚动显现
- 横向钉住的 My Work 区域，向下滚动时画廊横向移动
- 服务区双向图片跑马灯、视差统计数字与旋转圆形文字环
- 纯 HTML/CSS/JS，无构建步骤，GSAP 与 Lenis 通过 CDN 引入
适用场景
- 设计师或前端开发者搭建个人单页作品集
- 创意工作室展示视觉作品与团队介绍
- 需要深色电影感动效的静态页面原型
- 作为学习 GSAP ScrollTrigger 与 Lenis 滚动动画的参考项目
适合人群
- 熟悉 HTML/CSS 并能直接编辑源码的开发者
- 希望快速替换文字与图片即可上线的个人用户
- 偏好无框架、无构建流程静态页面的使用者
- 需要展示横向画廊与滚动叙事效果的创意从业者
使用前需要核对
- 下载或克隆仓库后，直接用浏览器打开 index.html 即可预览
- 可选本地服务：在项目目录执行 python3 -m http.server 8000
- 在 index.html 中搜索“Ayan Raza”替换姓名、角色、邮箱和社交链接
- 在 css/style.css 顶部的 :root 中修改 --bg、--fg、--accent 等颜色变量
- 将 assets/ 中的 portrait.jpg、standing.jpg、service-*.jpg、work-*.jpg、blog-*.jpg 替换为同名自有图片
本介绍由 AI 根据目录元数据和仓库 README 整理，实际功能以原仓库为准。
功能与适用范围
目录记录的用途为作品集，主要技术栈为HTML。功能是否完整实现，需要在源码和演示中进一步确认。
- HTML
- 作品集