Neta
ExploreWorksWorldsToolsGuides
ExploreToolsGuides
生成我的滚动网站
滚动动画网站生成器

滚动动画网站生成器

一句描述就能做一个网站，滚动就是镜头运动——俯冲进场景，飞出来，再落进下一个，全程不剪辑。

《Katagiri High — The Last Light》——在 Horimiya 世界里为这一页做出来的。在画面里滚动：三个场景、两处接缝、一条连续的航程。

《Katagiri High — The Last Light》——在 Horimiya 世界里为这一页做出来的。在画面里滚动：三个场景、两处接缝、一条连续的航程。

滚进这段航程↗
《The Descent》——水晶桥顺着深渊盘旋而下，画面上有场景文案和导航《The Hollow Star》——沿中轴望向王座厅，场景标题是 The Hollow Center《Odyssey》——独眼巨人塞满洞穴，场景标题是 The Cyclops《巨物卷》——岛屿一样大的鲸鱼从一条小船下方浮出，水墨风格
✦滚动网站
做一个滚动动画网站，主题是一个雨夜的海港夜市
SENGOKU — 军营苏醒 — 三幕中的第一幕。滚动让镜头穿过旗阵落到帐篷前线，页面上写着「滚动下降」，它说到做到。SENGOKU
军营苏醒 — 三幕中的第一幕。滚动让镜头穿过旗阵落到帐篷前线，页面上写着「滚动下降」，它说到做到。
SENGOKU — 万刃过原 — 第二幕。没有切到战场，是同一台镜头越过红桥，长枪和战鼓在它周围涌上来。SENGOKU
万刃过原 — 第二幕。没有切到战场，是同一台镜头越过红桥，长枪和战鼓在它周围涌上来。
SENGOKU — 白城终局 — 第三幕。航程停在天守阁，然后给你一个「再飞一次」。三个场景、两处接缝、零淡入淡出。SENGOKU
白城终局 — 第三幕。航程停在天守阁，然后给你一个「再飞一次」。三个场景、两处接缝、零淡入淡出。
Five Realms — 月下山门 — 五重境界的第一重。俯冲从拱门外开始，直接穿门而过，门是镜头真的会经过的地方。Five Realms
月下山门 — 五重境界的第一重。俯冲从拱门外开始，直接穿门而过，门是镜头真的会经过的地方。
Five Realms — 竹林低语 — 第二重。衔接片段把山门留在身后，而不是溶到下一张静帧。Five Realms
竹林低语 — 第二重。衔接片段把山门留在身后，而不是溶到下一张静帧。
Five Realms — 云海之上 — 第三重。镜头爬上云层时，文案和数据条依然读得清。Five Realms
云海之上 — 第三重。镜头爬上云层时，文案和数据条依然读得清。
Homer’s Odyssey — 伊萨卡：启程 — 九场戏同出一张母图，所以港口、船和光都属于同一个世界。Homer’s Odyssey
伊萨卡：启程 — 九场戏同出一张母图，所以港口、船和光都属于同一个世界。
Homer’s Odyssey — 特洛伊：木马 — 第二场。从港口接过来的是生成的片段，不是交叉淡入——火先到，你才意识到换了场。Homer’s Odyssey
特洛伊：木马 — 第二场。从港口接过来的是生成的片段，不是交叉淡入——火先到，你才意识到换了场。
Homer’s Odyssey — 酒色之海 — 第三场。导航点可以跳场景，滚轮仍然逐帧擦洗中间每一格。Homer’s Odyssey
酒色之海 — 第三场。导航点可以跳场景，滚轮仍然逐帧擦洗中间每一格。
LIVE PROOF

实际打开看看。

打开作品，就在这里用。

实际打开看看。在新标签页打开
想要自己的？生成我的滚动网站

滚动网站是一段航程，不是幻灯片。

Studio 先造世界，每个场景出一张 16:9 静帧，再生成把你从一个场景带到下一个的镜头片段。交付的页面是纯 HTML 加原生 JavaScript：滚动位置决定视频时间，所以手机能跑、不依赖框架，体积大约等于三段短视频。

  • 接缝，不是剪切 — 每段衔接都用上一段最后一帧和下一段第一帧生成，接上是同一帧，而不是交叉淡化。
  • 全场一个look — 每个场景静帧都从同一张母图派生，所以第一场的港口和第三场的港口是同一个港口。
  • 交付的是页面，不是视频 — 你拿到一个可以打开、fork、转发的网址。场景标题、眉题、数据条和导航文字都是可以直接改的 HTML。

动手之前，大家会问的问题。

什么叫滚动动画网站？

滚动不只是让页面往下走，而是驱动一台镜头。每个滚动位置对应一帧画面，访客按自己的速度穿过场景，而不是看一段视频自己播。

需要 GSAP 或 Three.js 吗？

不需要。引擎是原生 JavaScript，用滚动位置擦洗预渲染片段。你已经有 GSAP 或 Next.js 站点的话可以直接嵌进去，但这里不强依赖任何一个。

一开始做几个场景合适？

三个。16:9 下大约 25 MB 视频，加载很快，已经能读成一段旅程。每多一个场景会多两段片段，大约再加 9 MB。

手机上能用吗？

能。小屏会拿到 640×360 的版本，擦洗跟着触摸滚动走，桌面端那些大文件根本不会加载。

做一次要多少生成？

三张静帧、三段俯冲、两段衔接，一共八个产物。开始前先问 Studio 要片段数量和模型，视频才是慢又花钱的部分。

做完还能改文案吗？

能。场景标题、眉题、数据条、导航文字都是已发布页面里的普通 HTML，改字不用重新渲染任何一帧。

某一段生成失败会怎样？

构建会停下来，并告诉你是哪一段失败。它不会拿占位图补上——假场景会毁掉接缝，也毁掉整段错觉。

可以用现成 IP 或我自己的美术吗？

可以。场景可以从一张参考图派生，这一页的世界也都是做在已有的 IP 世界里的。如果要和某个设定对齐，就带上一张角色设定图或主视觉。

给一个地方三个停靠点。

Studio 生成场景、俯冲和接缝，然后发布成一个你能滚动、能转发的页面。就从这个海港开始，或者写你自己的地方。

做一个璃月夜市滚动网站
×