滾動裡的深度
視差網站建置工具:真分層,不寫程式
寫一個地點,得到一張滾動時天空、建築與前景以不同速度錯開的單頁網站,不用寫程式。













全部竅門就是深度。圖層由 Studio 畫。
Neta Studio 是一個AI 世界建構器——一句話就給你一個有地點、有人物、有天氣的世界。視差頁面是這個世界產出的一種作品:同一個地方只畫一次,再拆成幾層,滾動才有東西可分離。這個世界還能走進去、玩起來或拍成影片;這一頁只負責深度。
- 圖層來自同一張畫——天空、建築、道具和前景剪影都出自同一張主圖,分開之後光線仍然對得上。
- 能感覺到的速度差——每層有自己的速率;前景大約是天速的八倍,這才是深度,而不是淡入淡出。
- 一個資料夾,無需建置——純 HTML、CSS 和 PNG。本地能開,丟到任何主機都能跑,也可以直接在世界裡發布成連結。
常見問題
什麼是視差網站?
一張單頁網站,不同距離的東西在滾動時以不同速度移動。天空慢慢飄,建築飄得多一些,前景飛快掠過。深度來自速度差,不是來自 3D。
需要自己用 Photoshop 去背嗎?
不用。工作階段會為每個場景畫一張主圖,再把各層作為獨立 PNG 交給你,前景自帶透明邊緣。你也可以用任何編輯器打開這個資料夾。
和滾動影片網站有什麼差別?
滾動影片網站是在拖動一段預先渲染的鏡頭飛行——你看的是影像。這裡是固定舞臺上疊著幾張靜態圖層:沒有拍攝,檔案很小,改一個數字就能給任何一層換速度。
可以用我自己的世界或現成 IP 嗎?
可以。說出地點和人物,或指向你已經建好的世界——圖層會照那個世界的建築來畫,幾個場景能保持一致。
一開始做幾個場景合適?
三個。一個場景能證明效果;三個才有開場、中段和收尾。每個場景增加四層。
手機上能用嗎?
可以。觸控滾動驅動同樣的速率,舞臺鋪滿視窗,直式時文案會重新收緊。系統開啟 prefers-reduced-motion 時各層保持靜止,頁面就變回一張正常的圖文單頁。
之後能改文字和速度嗎?
能。文案就是普通 HTML,每層的速率是腳本裡的一個數字。把 0.12 改成 0.2,天空就走得更快,頁面其他部分不受影響。
需要自己找伺服器代管嗎?
不用。在世界裡發布就會給你一個能在瀏覽器打開的連結;這個資料夾也可以原樣放到任何靜態代管上。
給一個地方一點深度。
一句話、三個場景、每個四層——外加一個能直接打開的連結。
×