模板详情页上写着「集成 GSAP 动效」这几个字的时候，你拿到手的可能是三种完全不同的东西。
第一种，GSAP 只负责元素进场——滚到哪一屏，那一屏的标题和图片淡入上浮。这件事 AOS、WOW.js 甚至一段 IntersectionObserver 都能做，换掉不影响任何版式。第二种，GSAP 参与到内容里：标题被拆成单字依次落下，数字从 0 滚到 3000，图片从一条缝展开成整块。第三种，GSAP 是页面结构本身——ScrollTrigger 把滚动条变成时间轴，你往下滚一屏，画面里在发生一段被编排好的事，动效停了页面就散了。
这三档的差别，直接决定你后期能不能改。第一档拆掉就是一个普通静态站；第三档动不了，因为版式是围着动画排的。所以「用了 GSAP」本身不是卖点，GSAP 用在哪一层才是。下面 14 款是童哲网上架的、明确集成了 GSAP 的 HTML 网站模板，按三组排：创意机构与作品集、科技 AI 与 SaaS、以及把 GSAP 用到传统行业里的那几款。每一款我都写清楚它落在哪一档，以及有什么代价。
动手之前：授权和插件的事，2025 年 4 月之后不用再操心了
先把一件历史包袱说掉。GSAP 过去是「核心免费、增值插件付费」的模式，SplitText（文字分割）、ScrollSmoother（平滑滚动）、MorphSVG 这些最出彩的插件属于 Club GreenSock 会员专享，公开渠道能拿到的是试用版——在 CodePen 和本地跑得好好的，一放到自己的域名上就在控制台报错。
这件事在 2024 年秋天 Webflow 收购 GreenSock 之后变了。2025 年 4 月 29 日随 GSAP 3.13 发布，全部插件对所有人免费，商用也一样，会员插件被并进了主仓库和 npm 包；同一次更新里 SplitText 还被整个重写，体积砍掉约一半，并内置了屏幕阅读器的可访问性处理。
对买模板的人来说，落到实处的动作有一个：如果模板发布时间早于 2025 年 4 月，又用到了 SplitText 或 ScrollSmoother，打开演示页按 F12 看一眼控制台。如果有关于试用版或域名的警告，把 GSAP 换成官网当前版本即可，API 是兼容的，不用改业务代码。发布时间晚于这个节点的，直接用。
第一组 · 创意机构与作品集（01 - 06）—— GSAP 用得最重的一批
01. 19+ 套首页的创意机构模板 —— 体量最大的一款
Bootstrap v5.2.0 19+ 首页 42+ 内页 深浅双版
19 套以上的首页，方向分得很细：数字机构、AI 机构、视频制作、品牌设计、营销推广各有各的版式，而且每一套都配了深色和浅色两个版本；再加 42 张以上内页、10 种页头页脚可以自由组合。作品集展示模块本身又有经典、极简、现代、交互式、网格、地铁格、霓虹七种样式。动效这块是 GSAP 加视差滚动加平滑滚动，轮播用 Swiper，底子是 Bootstrap 5。
这种体量的模板，价值不在「功能全」，而在你可以先不定风格。创意类项目最常见的卡点是客户说不清楚要什么，拿 19 套首页去过一遍，指哪套做哪套，比对着效果图空谈快得多。
代价也来自同一件事。首先是选择成本——19 套首页真正会用上的是 1 套，剩下 18 套的 HTML、图片和样式都躺在包里，上线前要自己清理，不清理就是白白拖慢构建和部署。其次，页头页脚有 10 种组合，意味着导航结构没有统一的单一来源，你改一处 logo 要在多个文件里改。最后，深浅双版本听起来是白送的，实际是你后面每调一次品牌色都得调两遍。
19+ 套首页，分数字机构、AI 机构、视频制作、品牌设计、营销推广等方向
每套首页含深色与浅色两个版本，共 42+ 张完整内页
10 种页头与页脚样式，可自由组合
作品集展示有经典、极简、现代、交互式、网格、地铁格、霓虹七种样式
GSAP + 视差滚动 + 平滑滚动，轮播用 Swiper，代码通过 W3C 校验
适用：需要给客户做风格提案的创意机构、外包团队；能接受前期花半天做减法的人
02. 6 套首页 + 电商模块的数字代理模板 —— 注意那个 PHP 表单
Bootstrap v5.3.8 6+ 首页 35+ 页面 含电商页
比上一款克制一些：6 套以上首页、35 个以上预制页面，GSAP 配视差滚动，轮播是 Swiper，图标用 Feather（线条风格，比 Font Awesome 清爽，也更轻）。它比同类多出来的是一整套电商页面——商品列表、详情、购物车、结算流程都画好了。
要提醒的是那个「PHP + Ajax 动态联系表单」。这是个好东西，提交不跳页、有实时反馈，但它意味着你的主机必须能跑 PHP。如果你打算把静态站扔到对象存储、Cloudflare Pages、Netlify 这类纯静态托管上，这个表单直接不工作，而且不会报错，只会一直转圈——上线前必须实测一次。替代方案是换成表单服务的接口，或者自己写一个函数接住。
电商那部分同理：是静态页面，不是商城系统。没有库存、没有订单、没有支付，只是把该有的页面画出来了。真要做交易，要么接后端，要么把这些页面当成商品展示，下单走别的渠道。
适用：需要作品集 + 服务介绍 + 商品展示三合一的设计工作室；有 PHP 主机或者愿意换表单方案的人。
03. 3 套首页的大胆前卫风创意机构模板 —— 小而不缺
Bootstrap v5.3.3 3 套首页 13 内页 模块化结构
3 套首页、13 个内页，关于我们、服务、作品集、博客、联系齐了，一个完整的机构官网需要的就是这些。风格走大胆前卫路线，页面过渡和交互细节靠 GSAP 驱动。
把它和前面两款摆在一起看，其实是同一类需求的三个体量档位：19 套首页解决「不知道要什么」，6 套解决「要作品集也要卖货」，3 套解决「已经知道要什么、只想快点上线」。第三档往往才是独立设计师和小团队的真实情况——多出来的首页不会让你更快，只会让你多花一小时决定用哪套。
它的短板是深度。13 个内页里没有多层级的服务详情结构，博客也只有列表和详情两层，如果你的服务线有五六条、每条都需要独立落地页，得自己扩。另外「大胆前卫」是有代价的：这套视觉放到需要传递稳重感的场合（比如给制造业客户做官网）会显得不合适，它的目标读者就是同行和创意类甲方。
适用：独立设计师、5 人以内的创意团队；页面结构简单、想两三天上线的项目。
04. 4 套首页的数字创意模板 —— 代码注释最全的一款
Bootstrap v5.3.2 4 套首页 侧滑菜单 W3C 校验
4 套首页版式，GSAP 负责页面过渡和交互，移动端用 off-canvas 侧滑导航，图标是 Font Awesome，字体走 Google Fonts，页面全部通过 W3C 校验。
这一款在本组里的特点是说明书写得好——代码注释详尽，结构清晰，作者明确把「不熟悉前端的人也能改」当成设计目标。这不是虚的：模板买回来最费时间的往往不是改代码，而是找到该改的那一行在哪个文件里。注释齐全的模板，替换内容的效率能差出好几倍。
两个务实的提醒。一是 Google Fonts 在国内的加载不稳定，页面首屏会卡在字体请求上等到超时，观感很差。做面向国内的站，务必把字体文件下载到本地引用，或者直接换成系统字体栈，这一步大概十分钟，收益是首屏时间的肉眼可见变化。二是它的功能清单相对基础，没有电商、没有多语言、没有深色模式，这些都得自己加——反过来说，包也就更干净。
适用：第一次买 HTML 模板、准备自己改内容的人；需要一个干净底子往上加东西的开发者。
05. 精致克制风的创意代理模板 —— 兼容性声明别当真
Bootstrap v5.2.3 3+ 首页 2 页头 2 页脚 光标交互
3 套以上首页，2 种页头配 2 种页脚自由组合，GSAP 同时管滚动和光标交互——鼠标移动时页面元素有轻微的跟随反馈，是这一款质感的主要来源。整体风格是「精致克制」，留白多、字体节奏讲究，激活态和悬停态都单独做过，触控友好。
它和第 03 款是本组里风格光谱的两端：一个大胆张扬，一个安静高级。如果你的客户是品牌方而不是创意方，通常后者更容易过稿。
有一条描述需要单独说明：模板宣称「兼容主流浏览器（含 IE9+）」。这句话是同类模板沿用多年的旧文案，不要据此判断它的技术新旧——IE 全系已经在 2022 年 6 月停止支持，微软后来在 Windows 上把它彻底禁用了，今天没有任何理由为 IE 做适配。真正需要关心的是它基于 Bootstrap 5.2 这一点：5.2 和 5.3 之间的主要差别是 5.3 加入了官方深色模式和新的配色系统，如果你打算做深色主题，从 5.3 起步会省事一些。
另外光标跟随效果和 macOS Dock 那类交互一样，依赖鼠标位置，触屏上完全不存在。它是桌面端的加分项，不是移动端的。
适用：面向品牌客户的代理公司、需要「高级感」而非「冲击力」的官网。
06. 赛博朋克风网络安全作品集落地页 —— 全篇唯一的单页
HTML5 + GSAP 单页落地页 ScrollTrigger RTL / LTR
整篇里唯一一款不是「网站」而是「一页」的：赛博朋克视觉的网络安全作品集落地页，矩阵雨背景、终端风格的加载器、实时安全监控仪表盘、黑客操作轮播，滚动叙事由 GSAP ScrollTrigger 加 Anime.js 一起驱动，还带 RTL / LTR 双向布局。
这就是开头说的第三档——动效不是装饰，是内容本身。仪表盘上的数字在跳、终端在打字、代码雨在下，这些一起构成了「我是干安全的」这个表达。把动效关掉，剩下的就是一页普通简历。渗透测试、安全顾问、红队工程师做个人品牌页，这种表达方式比一份 PDF 简历有效得多。
三个必须知道的限制。一是它只有一页，没有博客、没有服务详情，你要写文章得另找地方。二是它同时加载了 GSAP 和 Anime.js 两个动画库，功能高度重叠，体积是叠加的——如果你要二次开发，把 Anime.js 那部分改写成 GSAP 是值得做的一次减重。三是矩阵雨这类常驻 Canvas 动画会持续占用 GPU，笔记本上表现为风扇转、耗电快，手机上更明显。合理的做法是给它加一个页面不可见时暂停的开关，并尊重系统的「减弱动态效果」设置。
适用：网络安全从业者的个人品牌页、技术向的活动落地页；不适合当作公司官网的底子。
第二组 · 科技、AI 与 SaaS（07 - 10）—— 深色是这一组的默认值
07. 深黑配荧光黄的数字机构模板 —— 插件清单最长的一款
Bootstrap v5.3.3 2 套首页 12+ 页面 深黑 + #EEFB13
深黑底加荧光黄（#EEFB13）点缀，这个配色这两年在科技和数字机构类站点上非常吃香，冲击力强、辨识度高，而且黄色本身在深色底上的对比度足够，不容易踩可读性的坑。2 套首页、12 个以上功能页面，覆盖服务详情、作品集、团队、博客、联系。
它的功能清单是这一组里最长的，基本上一个数字机构官网想得到的区块都在里面了：
全屏搜索遮罩层、画布式移动端侧滑菜单
FAQ 手风琴折叠、跑马灯文字滚动条
价格方案对比区块、数据统计与核心数字展示
客户评价滑块（带头像与社交链接）、Swiper 轮播
视频弹窗灯箱（Magnific Popup）、邮件订阅表单
自定义鼠标指针效果、品牌化预加载动画
技术上有一处值得留意：它同时用了 GSAP 和 WOW.js。WOW.js 是配合 animate.css 做滚动入场的老库，版本停在 1.1.3，GitHub 上积压着一百多个未处理的 issue，多年没有实质更新。而它做的事情——元素滚进视口时播放一个入场动画——GSAP 的 ScrollTrigger 完全覆盖得了。这两个库共存属于历史遗留，二次开发时把 WOW.js 和 animate.css 一起去掉、入场统一交给 GSAP，是一次划算的清理：少两个依赖、少一份 CSS，动效反而更好控制。
另外「自定义鼠标指针」这个功能建议想清楚再留。它在创意类站点上是加分项，但会覆盖掉系统光标的形态提示（比如文字输入的 I 型、可点击的手型），对不熟悉的访客是负担，触屏上则完全无效。
适用：数字营销机构、IT 服务商、SaaS 品牌；能接受深色为主视觉的项目。
08. AI 与 SaaS 暗黑落地页模板 —— 5 套落地页，单页多页双版本
Bootstrap v5.3.8 5 套落地页 单页 / 多页 Vanilla JS
深色底配发光渐变，典型的 AI 产品官网视觉。5 套落地页方案，而且每套都提供单页和多页两个版本——这个设计比想象中实用：产品早期用单页，把特性、定价、评价、FAQ、CTA 全压在一屏一屏里；等内容多了再切多页，不用换模板。转化模块是完整的，登录、注册、找回密码这些内页也都有，够支撑一个 SaaS 产品从落地页到官网的完整上线。
技术底子值得夸一句：Bootstrap 5 加原生 JavaScript，没有 jQuery，GSAP 在这里只做微交互——按钮反馈、区块进场、过渡曲线，属于开头分的第一档。这意味着你想把它接进 Vue、React 或者任何构建体系都不难，动效那层可以整个替换掉。
它的问题是同质化。深色加发光渐变这套视觉，从 2023 年起被 AI 创业公司用到了泛滥的程度，访客很难通过它记住你是谁。要用的话，把力气花在自定义图形素材上（模板本身带了一批，但那也是所有买家共享的），或者干脆换一套非黑色的主色，反而更容易被记住。另外它以落地页为核心，内容型页面偏弱——博客只有基础结构，真要做内容营销得自己扩。
适用：AI / SaaS 产品的首个官网、需要单页多页随时切换的早期团队。
09. 带文字分割与数字计数的数字营销模板 —— 中文站要注意分割动效
Bootstrap v5.3.3 4 套首页 13+ 内页 附 SCSS 源文件
4 套首页、13 个以上内页，动效阵容是本文里最具体的一款：GSAP 滚动动画、文字分割动效、图片展开动画，外加 Odometer 数字滚动计数器，轮播用 Swiper。这是第二档的典型——GSAP 不只做进场，它参与到内容的呈现方式里。而且模板附带 SCSS 源文件，改配色改间距是改变量而不是覆盖样式，这一点对要做深度定制的人价值很大。
但文字分割动效有一个中文站必须先想清楚的问题。SplitText 这类工具是按字符或按词拆分的，英文有天然的空格词边界，一个词一个词地弹进来节奏很好；中文没有空格，逐字弹出的结果是一句十几个字的标语被拆成十几个独立动画单元，观感碎、时长也拖得久。可行的做法有两条：一是只对短标题（六到八个字以内）用逐字动画，长句改成整行淡入上移；二是自己在需要断开的地方插入分割标记，按语义分组而不是按字符分组。这一步模板不会替你做。
另一个附带成本：文字分割会把一个 <h1> 拆成几十个 <span>，DOM 节点数量成倍增长。少量标题无所谓，整页都这么干会拖慢渲染。GSAP 3.13 重写后的 SplitText 已经内置了给屏幕阅读器的可访问性处理（避免读屏软件把一句话念成一堆单字），如果模板带的是旧版本，记得升上去。
适用：数字营销机构、需要强动效表现力又愿意做本地化调整的项目；配 SCSS 工作流的团队。
10. 商务咨询与专业服务模板 —— 平滑滚动这一项建议关掉
Bootstrap v5.3.2 多套首页 定价表 吸顶导航
面向咨询公司、财务顾问、律所、人力资源这类专业服务机构。多套首页，服务介绍、案例展示、团队页、定价方案、博客资讯的页面体系是完整的，联系表单预留了对接后端的结构，导航吸顶配平滑滚动。
它在这一组里的位置有点特殊：其他三款是给「卖技术的人」用的，这一款是给「卖信任的人」用的。差别体现在动效的克制程度上——同样是 GSAP，这里的过渡幅度明显更小，因为律所官网上一个花哨的进场动画减分不加分。这个判断模板作者做对了。
不过有一项建议主动关掉：平滑滚动。用 JS 接管滚轮、让页面以自定义的缓动跟上来，视觉上是顺了，但它改变了系统级的滚动手感，很多人会觉得「滑腻、跟不上手」，尤其在触控板上。更实际的问题是它常常和浏览器的查找功能、锚点跳转、键盘翻页打架，而专业服务类网站的访客里，用键盘和读屏工具的比例并不低。原生的 scroll-behavior: smooth 就足够处理锚点平滑，不需要整页劫持。
另外这款和其他几款一样走 Google Fonts，面向国内的站记得换本地字体。定价表区块对律所、会计事务所来说未必用得上（这类服务通常不公开报价），可以直接替换成资质与案例区块。
适用：咨询公司、律所、财税与人力机构；需要专业稳重而非视觉冲击的官网。
第三组 · 传统行业里的 GSAP（11 - 14）—— 同一套技术，完全不同的用法
11. 理疗与康复诊所模板 —— 唯一一款 Tailwind v4 底子
Tailwind CSS v4.1.12 26+ 内页 视频弹窗 可用表单
面向理疗诊所、康复中心、运动损伤专科和整脊诊所，风格简洁、专业、有温度——这一行的官网最忌讳冷冰冰或者过度营销，这套的调性拿捏得准。26 个以上内页覆盖诊所常见页面需求，带视频弹窗、移动端侧栏导航和一个真能跑的联系表单。
它是本文 14 款里唯一不是 Bootstrap 底子的，用的是 Tailwind CSS 4.1，这带来两个实际差别。第一，Tailwind v4 改成了 CSS 优先的配置方式，tailwind.config.js 没有了，主题变量直接写在 CSS 的 @theme 块里——如果你之前用过 v3，改配色的地方变了，别在项目里翻配置文件了。第二，Tailwind v4 的浏览器门槛比 Bootstrap 5 高：官方要求 Chrome 111、Safari 16.4（两者都是 2023 年 3 月）和 Firefox 128（2024 年 7 月）。对面向普通患者的诊所站来说，这个门槛通常没问题，但如果你的客群里有大量老旧安卓设备，值得先看一眼实际访问数据。
还有一件和技术无关但更要紧的事：医疗类网站在国内上线要过前置审批和医疗广告的内容限制，模板里现成的「治疗效果」「康复案例」这类文案区块不能照搬。这一块的细节我在医疗健康与诊所官网模板那篇里写得比较细，做这一行的建站之前建议一并看看。
适用：理疗、康复、整脊、运动医学诊所；用得惯 Tailwind 构建流程的开发者。
12. 物流货运企业模板 —— 10 套首页，但缺了最关键的那个功能
Bootstrap v5.3.3 10 套首页 多页 + 单页 SEO 规范
货运物流行业的专业模板，设计稳重、商务感强，10 套首页里多页和单页两种结构都有，内页有服务介绍、项目案例、定价方案、图片画廊和博客，业务覆盖公路货运、综合物流、仓储、企业快递、包裹配送和货代。GSAP 在这里用得很收敛，主要是区块进场和数据统计的滚动计数。
这一款要提醒的是一个模板给不了、但客户一定会问的功能：运单查询。物流企业官网上访客量最大的入口从来不是「关于我们」，而是那个填单号看进度的框。模板画不出这个功能，因为它必须连你自己的 TMS 或者第三方接口。所以拿这套模板的正确姿势是：首屏最显眼的位置留给查询框，其余内容往后排，然后花预算在接口对接上。把首屏做成一张大卡车图配一句标语，是这一行最常见的浪费。
另外「10 套首页」需要打个折看：它们之间的差别主要在配色、首屏排版和区块顺序，底层结构是同一套，不像第 01 款那种真正意义上的多方向设计。这不算缺点，只是别指望靠切首页得到一个完全不同的站。
适用：货运、仓储、货代、同城配送企业官网；愿意把预算投在查询功能而非视觉上的公司。
13. 太阳能与环保企业模板 —— RTL 和深浅模式是给出海准备的
Bootstrap v5.3.8 3 套首页 27+ 内页 RTL 深浅模式
面向太阳能、光伏、可再生能源、环保组织和绿色科技企业。3 套首页配 27 个以上内页，服务、项目、团队、案例、常见问题一应俱全，动效是 GSAP 加平滑滚动加视差，轮播用 Swiper，Bootstrap 版本是本文里最新的 5.3.8。
它有两个功能一眼看去像是白送的，其实是有指向的：RTL 方向支持和深浅模式切换，这两样都是为海外市场准备的。RTL 对应阿拉伯语和希伯来语，光伏出海的主力市场正好包括中东；深色模式则是欧美用户的普遍习惯。如果你做的是纯国内站，这两个功能用不上，但代码要一直带着——RTL 会让每一处方向相关的样式都多一套镜像规则，深浅模式会让每个颜色都有两个值。做国内站的话，上线前把这两套一起删掉，样式表能瘦一大圈，后续改配色也少一半工作量。
反过来，如果你正好在做出海站，这两项就是这一款最值钱的地方，自己从零加要花的时间远超模板本身的成本。
适用：光伏与新能源企业、环保组织；尤其适合有中东或欧美市场的出海项目。
14. 餐饮品牌官网模板 —— 插件叠得最厚的一款
Bootstrap v5.3.3 3 套首页 GSAP + AOS Ajax 表单
餐厅、咖啡厅、甜品店、烘焙坊适用的品牌官网模板，3 套预建首页，设计现代简约，菜品展示、品牌资讯、在线订位、博客都做了，联系表单走 Ajax 提交。
它的插件清单是全文最长的，每一个单独看都是成熟稳定的选择：
GSAP —— 页面动效与过渡
AOS —— 滚动入场动画，和 GSAP 功能完全重叠
Slick Slider —— 轮播，jQuery 插件
Magnific Popup —— 图片与视频灯箱，jQuery 插件
Isotope —— 菜品分类筛选与瀑布流排版
CounterUp —— 数字滚动计数
问题出在叠在一起：GSAP 和 AOS 做的是同一件事；Slick 和 Magnific Popup 都依赖 jQuery，意味着页面还得再拉一个 jQuery 进来。一个餐厅官网的首屏因此要下载五六个 JS 库。
这件事在餐饮行业尤其要紧，因为这一行的访客几乎全在手机上，而且很多是在店门口、在路上、在信号不好的商场里打开你的网站——他们要的就是电话、地址、营业时间和几张菜品图。首屏多等两秒，人就走了。所以这一款拿到手之后，第一件该做的事不是改文案，是做减法：AOS 去掉、入场统一交给 GSAP，Isotope 的分类筛选如果只有三五个分类就用几行原生 JS 替代，Magnific Popup 换成原生 <dialog>。做完这一轮，页面重量能降下来一大截。
适用：单店或小连锁的餐饮品牌官网；愿意做一轮依赖清理的开发者。
怎么选：三句话版本
如果你要给客户做提案、或者还没定风格，去看第 01 款（19 套首页）和第 02 款（6 套首页含电商）；目标明确、只想快点上线，第 03、04 款那种 3 到 4 套首页的体量才是对的，多出来的选项只会消耗你的时间。
如果你做的是科技、AI、SaaS，第 07、08 款是两条不同的路：前者靠配色和功能密度取胜，后者靠转化结构完整。想要动效本身成为卖点，第 09 款（文字分割 + 数字计数）和第 06 款（ScrollTrigger 滚动叙事）是本文动效最重的两款，但也是最难改的两款。
如果你做的是传统行业，第 11 到 14 款说明了同一件事：GSAP 在这些场合的正确用法是「让页面显得用心」，不是「让页面显得炫」。物流站的价值在查询框，餐饮站的价值在首屏加载速度，诊所站的价值在合规和信任感——动效都是加分项，都不是主项。
几个常被问到的问题
Q：GSAP 会拖慢网站吗？
GSAP 核心库压缩后大约 70KB 级别，对一个现代网站来说不算负担，而且它的动画实现是业内公认高效的。真正拖慢网站的从来不是 GSAP 本身，是叠加——本文里就有三款同时装了两套动画方案（GSAP + WOW.js、GSAP + AOS、GSAP + Anime.js）。选一套用，把另一套删掉，比纠结库大小有意义得多。另外常驻的 Canvas 或 WebGL 背景（第 06 款那种）才是真正的耗电大户，它和 GSAP 无关，是渲染本身的成本。
Q：GSAP 的动画搜索引擎能读到吗？
能，但有前提。GSAP 动的是真实的 DOM 元素，文字始终是文字，不像 Canvas 或视频那样把内容变成像素，所以爬虫读得到。需要注意的是「进场前隐藏」的写法：很多滚动入场动画会先把元素设成 opacity: 0 再动画出来，如果这个初始状态是写死在 CSS 里而不是由 JS 设置的，爬虫在不执行动画的情况下看到的就是一片透明内容。稳妥的做法是初始隐藏由 JS 加上——脚本没跑（包括禁用 JS 的场景），页面就是完整可读的。
Q：我不会写 JS，能改这些模板的动效吗？
能改幅度，难改结构。GSAP 的时间轴写法可读性相当好，把 duration 从 1 改成 0.6、把位移距离从 100 改成 40，这类调整照葫芦画瓢就行，不会写 JS 也能试出来。但如果动效是页面结构的一部分（比如第 06 款那种滚动叙事），改动画等于改版式，那就不是调参数的事了。所以不打算碰 JS 的人，优先选第一档的模板——动效只做进场，删掉也不影响页面。
Q：这些模板能接到 WordPress 或者其他 CMS 上吗？
可以，但都是二次开发的工作量，模板本身是纯静态 HTML。比较务实的路径有两条：一是接到主题框架里，把区块改成模板文件；二是走 Headless 方案，内容从接口拿，前端保持这套静态结构。要提醒的是第 02 款的 PHP 表单——如果最终跑在 CMS 上，这个表单应该换成 CMS 自己的表单组件，别让两套后端逻辑并存。
Q：为什么同一款模板，演示页很流畅，我改完就卡了？
最常见的原因是图片。模板演示用的是压缩过、尺寸精确的图，很多人替换成自己拍的原图，一张就是三五兆，页面上十几张，滚动时浏览器一边解码大图一边跑动画，自然卡。换图之后务必压缩并转成 WebP，按实际显示尺寸导出，再给 <img> 补上宽高属性——最后这一步能避免图片加载时的布局跳动，对访客体验和搜索引擎的页面体验指标都有直接影响。
本文的 14 款都在童哲网网站模板板块。想看同类的可以顺着这几篇：个人简历与作品集网站模板（本文第一组的延伸，含更多轻量选择）、IT 与科技企业官网模板（第二组的完整版）、卡片与布局效果合集（里面有一款 GSAP Flip 的实现，值得单独看）。
