AI創業學院 · VideoLand

VIDEOLAND

把捲軸交給故事
不是交給表單。

這頁不是虛構案例。技術本身就是內容：往下捲，背景影片跟著你的捲動前進與倒退，逐格對齊，不是播一段固定動畫。

DEMO

這支影片正在被捲軸操控

捲到底再往回捲——影片會跟著倒退，逐格對齊，不是重播。

[ 01 ] 這是什麼技術

一般的背景影片只會自動播放，

看完就結束。捲軸綁定的影片不一樣——

它把播放進度變成一個可以來回操控的變數，

讀者捲多快，故事就走多快。

[ 02 ] 怎麼做出來的

不需要影片剪輯軟體外掛，也不需要動畫函式庫。四個步驟，全部是瀏覽器原生能力。

影片不是拿來自動播放的，是拿來被「翻頁」的。选一段 10–20 秒、有明確前後順序的畫面——太長會讓捲動距離失真，太短則進度感不明顯。

[ 03 ] 同一個艦隊

1+10 AI 學院各自獨立、共用同一套建站方法論。

[ 04 ] 幕後筆記

為什麼做這頁

「Webflow 那頁教的是 CSS 動效；這頁教的是影片。兩種技術，同一個原則——動效要對齊讀者的操作，不是對齊時間軸。」

下一步

核心只有一個 <video> 元素和一段內插邏輯。搬過去之前，先確認你的影片夠短、讀者的裝置在意 prefers-reduced-motion。