我操,這是AI 一次性能搞定的東西啊? Gemini 3 幫我產生了一個前段時間非常流行的滾動敘事網頁,隨著你的滾動會不斷播放豐富的動畫。 堅持到第5 秒,你會看到很離譜的事情,他tm 寫了一個看起來像3D 的一個複雜的卡片動畫。 提示詞👇
提示詞: 請你扮演一位擅長創意互動的前端開發專家。我要做一個類似Apple 產品頁風格的「Scrollytelling(滾動敘事)」網頁Demo。 技術堆疊要求: 使用HTML、CSS 和GSAP (GreenSock) 配合ScrollTrigger 外掛程式。 互動邏輯: 頁面高度要設定得很長(如5000px),建立一個全螢幕固定的視窗(Pinned Container)。使用者的滾動動作不會移動頁面,而是作為進度條(Scrub: 1)直接控制整個動畫的時間軸播放。 視覺與動畫流程(請依序實作以下Timeline): 開場: 螢幕中心只有簡潔的文字Slogan,隨著滾動,文字放大並漸隱消失。 UI 示範: 隨後,模擬「手機通知彈跳窗」和「郵件清單卡」從不同方向平滑飛入螢幕中心。 堆疊特效: 繼續滾動,這些分散的卡片要透過3D 變換,自動吸附堆疊在一起(Stacking Effect)。 高潮: 出現一個「Unsubscribe All」的按鈕,當滾動經過它時,堆疊的所有卡片瞬間向四周炸開/飛走(Explosion Effect)。 結尾: 露出最後的Logo。 風格要求: 極簡主義、圓角卡設計、陰影柔和、動畫曲線要非常有彈性(Elastic/Spring)。請直接給我可運行的完整程式碼文件