主体压大字:悬浮的主体前景,大字从身后滑过

做一个随滚动变化的首屏:一个抠好的主体(锦鲤、头盔、球鞋)悬浮在巨大的字前面,每滚一屏就有一个词从它身后滑过,主体会上下浮动、随滚动转动,并往鼠标的反方向偏。SandBase 在纯白背景上生成主体,Skill 自己去掉背景,也可以用你自己的透明 PNG。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

主体压大字:悬浮的主体前景,大字从身后滑过

准备好要展示的主体(或你自己的透明 PNG)、大字、品牌、文案、链接和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块、运行脚本和样式、抠好的透明 PNG 主体,以及开源字体。

使用方法

  1. SandBase 在纯白背景上画出主体。Skill 自己去背景:从边框开始漫水填充,边缘做柔化,再把边缘颜色里混进的白色去掉,不会留白边。

  2. 构建脚本写出页面:粘性舞台上三层,柔和的渐变、一排巨大的字,最上面是抠好的主体。

  3. 在浏览器里,每个词占一屏滚动,缓动着从主体身后横穿过去;主体上下浮动、随滚动转动,鼠标移动时它比大字移动得更多。

常见问题

换一个新主体要花多少钱?

通过 SandBase 生成一张图,大约 $0.075。用你自己的透明 PNG 不花钱。

能用我自己的图片吗?

可以:透明 PNG 直接用,或者用纯色平整背景、且背景和主体轮廓颜色不同的图片。

大字能写多长?

短词最合适,英文四到七个字母;中文每个词两个字,这样主体不会把整个词挡住。

为什么这里点链接没反应?

示例运行在沙盒框架里,链接被禁用了。在你自己的页面里,链接会指向你在 site.json 里填的地址。

手机上能用吗?

能。滑动就能让大字滑过。已在 390 像素宽的手机视口里检查过。开启减少动态效果时,大字居中不动,主体也保持静止。

为什么没有在线生成?

生成新场景需要在沙盒里注入模型 Key,后端暂时还不支持。目前请用你自己的 Agent 运行这个 Skill。