SuperAPI AI 工具集

hyperframes-slide-work-compare

设计与创作

查看项目

更新于 10-15 20:10

技能介绍

用途:在 HyperFrames 组合中制作 compare(对比)幻灯片,用于同时对比 2 至 4 个项目,例如把选项、方案或替代方案并排展示,并用要点说明各自特点。资料指出 A 到 B 的演变方向应使用 evolution-flow,而 A、B、C 的并列对比才用 compare。

主要能力:提供 HTML 结构、CSS 要点与 GSAP 入场动画方案。HTML 使用 div#s-N.scene.clip,包含 eyebrow、scene-title 与 compare-grid;每列用 compare-col、compare-heading 和 compare-list。CSS 中 compare-grid 使用 grid,2 列用 1fr 1fr,3 列用 repeat(3, 1fr),4 列用 repeat(4, 1fr),间距 32–40px。

使用方式:按资料给出的结构编写场景,并以 GSAP 时间线让 eyebrow、标题和各列依次入场,列间错开约 0.12–0.18 秒,各列用同方向的下到上动画。生成器可通过以 || 开头的行识别列标题,其下 - 行作为该列要点。

限制与建议:2 至 4 列较合适,列标题宜短(1 至 2 个词),各列要点数量尽量相近;5 列以上可读性下降,应拆分。具体安装命令、收费与平台信息暂未提供。