景深轮播:排在弯曲 3D 弧上、可以拖动的宽幅画面

做一个全屏轮播首屏:宽幅画面排在一道弯曲的 3D 弧上,后面是铺满屏幕的背景;当前画面正对你,两边的转开并沉入深处。拖动、滑动、触控板、方向键、按钮或缩略图都能带惯性地切换,大标题随每张画面变化。SandBase 把六张宽幅画面画成一张联系表,Skill 自动切开,也可以用你自己的文件夹。只用 CSS 3D。首屏之后是一个完整的落地页:章节大标题、简介、用 HTML 画的产品控制台、功能卡片、要点、数据、引言、行动按钮和页脚,背景光晕随章节变化,底部有悬浮的章节胶囊。

景深轮播:排在弯曲 3D 弧上、可以拖动的宽幅画面

准备好画面内容(或你自己的宽幅图片文件夹)、每张的标签、小标题、标题和一句话、品牌、链接、配色和语言。Skill 会交付一个完整的落地页(index.html)、一段可以粘进现有网站的区块、运行脚本和样式、切好的画面,以及开源字体。

使用方法

  1. SandBase 把六张宽幅画面画成一张 4k 的 2 × 3 联系表,Skill 找到白色间隔,把它切开。

  2. 构建脚本写出页面:每张图同时用作背景、弧上的画面和缩略图,标题是真实文字。

  3. 在浏览器里,每张画面按它和当前画面的距离摆放:向旁边移、往后推、转开、变淡;拖动、方向键、按钮和缩略图改变的就是这个位置。

常见问题

换一组新画面要花多少钱?

通过 SandBase 生成一张 4k 联系表:标价 $0.18,两个示例每张实际扣费 $0.135。用你自己的图片不花钱。

能用我自己的图片吗?

可以。把构建脚本指向一个放着 3 到 12 张宽幅 JPEG 或 PNG 的文件夹,就会跳过生成。

需要 WebGL 吗?

不需要,只用 CSS 3D。开启减少动态效果时,弧会直接跳到选中的那张,也不会自己往下翻。

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

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

手机上能用吗?

能。滑动就能切换画面。已在 390 像素宽的手机视口里检查过。

为什么没有在线生成?

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