HTML作品集

Portfolio-Template-06 — HTML 作品集模板

作者 Muhammad112233-creator

一个以深色电影感为基调的单页作品集模板,使用 GSAP ScrollTrigger、Lenis 平滑滚动和自定义光标,纯 HTML/CSS/JS 实现,无需构建步骤。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

1 个预览视图
整体预览
作者提供的预览

查看现有预览图,更多页面尚未采集。

目前有 1 张原始预览,可打开完整图片查看设计细节。

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-09-19查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

预加载页包含数字计数动画与“点击任意处激活”的进入方式

02

自定义光标由磁吸圆点和拖尾圆环组成,悬停作品时变为 VIEW 徽标

03

Lenis 平滑滚动配合 GSAP ScrollTrigger 实现逐词、逐字母的滚动显现

04

横向钉住的 My Work 区域,向下滚动时画廊横向移动

05

服务区双向图片跑马灯、视差统计数字与旋转圆形文字环

06

纯 HTML/CSS/JS,无构建步骤,GSAP 与 Lenis 通过 CDN 引入

模板详细介绍

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 许可证,允许个人和商业使用。

HTML作品集

适合你的项目吗?

适用场景

  • 设计师或前端开发者搭建个人单页作品集
  • 创意工作室展示视觉作品与团队介绍
  • 需要深色电影感动效的静态页面原型
  • 作为学习 GSAP ScrollTrigger 与 Lenis 滚动动画的参考项目

适合人群

  • 熟悉 HTML/CSS 并能直接编辑源码的开发者
  • 希望快速替换文字与图片即可上线的个人用户
  • 偏好无框架、无构建流程静态页面的使用者
  • 需要展示横向画廊与滚动叙事效果的创意从业者

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    下载或克隆仓库后,直接用浏览器打开 index.html 即可预览

  2. 2

    可选本地服务:在项目目录执行 python3 -m http.server 8000

  3. 3

    在 index.html 中搜索“Ayan Raza”替换姓名、角色、邮箱和社交链接

  4. 4

    在 css/style.css 顶部的 :root 中修改 --bg、--fg、--accent 等颜色变量

  5. 5

    将 assets/ 中的 portrait.jpg、standing.jpg、service-*.jpg、work-*.jpg、blog-*.jpg 替换为同名自有图片

查看仓库使用说明

授权与来源资料

使用条件与限制

待核对
  • 尚未完成使用条件评估,请先查看原仓库许可证。
查看许可来源
项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 74 / 100
技术栈
HTML
网站类型
作品集
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-09-18
截图检查日期
2026-09-19

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

当前版本没有可核对的编辑审核记录;旧的应用时间不代表已完成事实审核。

这条历史介绍未保存固定版本的来源快照。请对照当前仓库,发现不一致可反馈。

反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。