24d (edited) • General discussion
實作指南｜用 Codex × FloraFauna AI，打造會跟著滑動播放的動畫網站
你有沒有看過這類網站：
當使用者向下滑動時，畫面中的影片也會跟著捲動進度逐格播放；文字、圖片和圖形元素則同步進場，整個網站就像一段可以親手操控的動畫。
這種效果通常稱為「Scroll-driven Video」或「Scroll-linked Animation」。
我最近把整個製作流程整理成一份繁體中文實作指南，帶你由零開始，運用：
- FloraFauna AI 製作視覺概念與 AI 動畫素材
- Codex 建立網站及互動程式
- FFmpeg 壓縮與轉換影片格式
- Netlify 或 GitHub Pages 發布公開網站
- 手機與桌面版效能優化
- 常見問題排查與測試方法
這份指南的重點不是教你死背程式碼，而是讓你學會如何向 AI 清楚描述想要的效果，再由 Codex 協助你把概念逐步製作成真正可以開啟、滑動和分享的網站。
即使你不是程式設計師，也可以依照流程完成：
視覺概念 → AI 影片 → 網站製作 → 滑動互動 → 效能優化 → 正式發布
你會學到什麼？
完成這份指南後，你會知道：
- 如何規劃適合網站使用的 AI 動畫
- 如何撰寫更精準的影片生成 Prompt
- 如何讓影片真正與捲動進度連動，而不是自動播放
- 為什麼 4K 影片容易令網站卡頓
- 如何準備桌面版與手機版影片
- 如何要求 Codex 檢查、修正及優化網站
- 如何把本機 HTML 發布成任何人都能瀏覽的公開網址
另外，指南也特別說明了香港使用者需要注意的分享限制：
ChatGPT Site 的分享網址在香港可能無法正常開啟，除非使用 VPN。因此，如果網站需要交給客戶、朋友或公眾瀏覽，建議使用 Netlify、GitHub Pages 或其他正式網站託管服務。
適合誰？
這份指南特別適合：
- 想製作具電影感網站的設計師
- 想把 AI 影片變成互動體驗的創作者
- 不熟悉程式，但希望利用 Codex 製作網站的人
- 品牌、餐廳、作品集及活動網站製作者
- 想了解 AI Coding 實際工作流程的人
如果你跟著指南做出了自己的版本，歡迎在留言區分享作品。也可以告訴我你在哪一個步驟遇到困難，我之後可以再整理更多實作教學。
希望這份指南可以幫助你把原本只存在腦海中的畫面，真正變成一個能夠被看見、滑動和體驗的網站。✨
📥 下載完整繁體中文指南：
0
0 comments
實作指南｜用 Codex × FloraFauna AI，打造會跟著滑動播放的動畫網站
