提示詞: 請你扮演一位擅長創意互動的前端開發專家。我要做一個類似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)。請直接給我可運行的完整程式碼文件
正在加载线程详情
正在从 X 获取原始推文,整理成清爽的阅读视图。
通常只需几秒钟,请稍候。