滾動裡的深度

視差網站建置工具:真分層,不寫程式

寫一個地點,得到一張滾動時天空、建築與前景以不同速度錯開的單頁網站,不用寫程式。

夜市中段下課後的 3-B 教室廣場人群裡頂樓,欄杆邊
✦視差網站
做一張視差網站:黃昏的璃月港——碼頭、燈籠夜市、玉京臺階
第九碼頭 · 璃月
第九碼頭 · 璃月 — 鍾離在欄邊,身旁是旅行者和派蒙。四層畫面,速率 0.12 到 1.0。
燈籠商街 · 璃月
燈籠商街 · 璃月 — 第二章:攤位和店鋪在前,幾乎不動的港灣在後。
鶴望階梯 · 璃月
鶴望階梯 · 璃月 — 江連走過石獅;階梯那一層往上升,樓閣按住不動。
校門 · 片桐高中
校門 · 片桐高中 — 校門和腳踏車棚,路上還剩兩個學生。
3-B 教室 · 片桐高中
3-B 教室 · 片桐高中 — 三十六張課桌在前,窗光在後:一個頁面,三個距離。
頂樓 · 片桐高中
頂樓 · 片桐高中 — 欄杆走得最快,樓下的小鎮幾乎不飄。
碼頭 · 羅格鎮
碼頭 · 羅格鎮 — 斯摩格站在岸邊,木箱酒桶的速度是晨光水面的八倍。
處刑廣場 · 羅格鎮
處刑廣場 · 羅格鎮 — 人群那一層夾在高臺和廣場之間,鐘架穩住。
燈塔崖 · 羅格鎮
燈塔崖 · 羅格鎮 — 前景是崖草,龍在小徑上,燈塔在半個畫面之後。

全部竅門就是深度。圖層由 Studio 畫。

Neta Studio 是一個AI 世界建構器——一句話就給你一個有地點、有人物、有天氣的世界。視差頁面是這個世界產出的一種作品:同一個地方只畫一次,再拆成幾層,滾動才有東西可分離。這個世界還能走進去、玩起來或拍成影片;這一頁只負責深度。

  • 圖層來自同一張畫——天空、建築、道具和前景剪影都出自同一張主圖,分開之後光線仍然對得上。
  • 能感覺到的速度差——每層有自己的速率;前景大約是天速的八倍,這才是深度,而不是淡入淡出。
  • 一個資料夾,無需建置——純 HTML、CSS 和 PNG。本地能開,丟到任何主機都能跑,也可以直接在世界裡發布成連結。

常見問題

什麼是視差網站?

一張單頁網站,不同距離的東西在滾動時以不同速度移動。天空慢慢飄,建築飄得多一些,前景飛快掠過。深度來自速度差,不是來自 3D。

需要自己用 Photoshop 去背嗎?

不用。工作階段會為每個場景畫一張主圖,再把各層作為獨立 PNG 交給你,前景自帶透明邊緣。你也可以用任何編輯器打開這個資料夾。

和滾動影片網站有什麼差別?

滾動影片網站是在拖動一段預先渲染的鏡頭飛行——你看的是影像。這裡是固定舞臺上疊著幾張靜態圖層:沒有拍攝,檔案很小,改一個數字就能給任何一層換速度。

可以用我自己的世界或現成 IP 嗎?

可以。說出地點和人物,或指向你已經建好的世界——圖層會照那個世界的建築來畫,幾個場景能保持一致。

一開始做幾個場景合適?

三個。一個場景能證明效果;三個才有開場、中段和收尾。每個場景增加四層。

手機上能用嗎?

可以。觸控滾動驅動同樣的速率,舞臺鋪滿視窗,直式時文案會重新收緊。系統開啟 prefers-reduced-motion 時各層保持靜止,頁面就變回一張正常的圖文單頁。

之後能改文字和速度嗎?

能。文案就是普通 HTML,每層的速率是腳本裡的一個數字。把 0.12 改成 0.2,天空就走得更快,頁面其他部分不受影響。

需要自己找伺服器代管嗎?

不用。在世界裡發布就會給你一個能在瀏覽器打開的連結;這個資料夾也可以原樣放到任何靜態代管上。

給一個地方一點深度。

一句話、三個場景、每個四層——外加一個能直接打開的連結。

×