用途:在 HyperFrames 中制作 split(分栏)幻灯片,把截图、图表、示意图等视觉资料与要点解说放在同一页,适合需要同时展示图像与解释的场景,例如讲解图表或流程图。
主要能力:提供横向(左右分栏)与纵向(上下分栏,适配 9:16 竖屏短视频)两种 HTML 结构;拆分后的要点区沿用 title-bullets 的 .bullets 样式;给出 CSS 要点,如 .split-grid 使用 grid、grid-template-columns:1fr 1fr、gap 48–64px、margin-top 48px、flex:1,.split-grid.vertical 改为单列双行;.split-image 作为容器,无图时以虚线边框和浅色背景充当占位;图片用 object-fit:contain 适配。还提供 GSAP 入场动画示例:图片自左侧进入、要点自右侧进入,eyebrow、scene-title 依次上浮淡入,方向性保持一致。
使用方式:按提供的 HTML 结构编写带 data-start、data-duration、data-track-index 的 scene 节点,图片放入 assets 路径并设置 crossorigin,要点用带 id 的 li 标记;动画以时间轴 tl.from(...) 按 start 偏移编排。若用于生成器,可按规则识别:Markdown 中同时出现图片与无序列表时判定为 split 类型。
限制:无图片时不应使用 split,而改用 title-bullets 或 title-image;要点应提供解读,避免重复描述图片。资料未提供产品收费、价格、平台与效果等信息。