網站設計特效－頁面切換

用 View Transitions API 快速做出有趣的換頁動態吧 如果有在做 Native-like 的 Web Application 的人，應該都曾為了要做到像是 Native 的頁面轉換動態而絞盡腦汁。

被問到如何在單一 HTML 網頁做出多頁切換效果。 情境是一個只有兩三頁的超迷你網站，一切從簡，想改用單一 HTML 檔打死，但要有點選導覽頁籤切換不同頁面的效果，還必須能用瀏覽器的上一頁下一頁鈕跳轉。

在網站中通常換到下一頁時，會有個讀取的時間。 如果在這時候，做一些讀取時的特效，可以創造頁面之間的貫連性，不僅能提升使用者感受，甚至也能增加些趣味性。 在這裡我們沒有要做過多的範例展示，主要在聊聊整個流程以及細節。

Turn.js 是老牌的翻頁特效 JS 工具，被用在許多電子書閱讀器上面

我們的換頁特效設計的相對簡單，但其實可以找到非常多有特色的換頁特效，像是 e-s.tw、簡訊設計的換頁特效都加入了自己的品牌核心

在這個視覺效果當道的時代，優秀的網頁轉場設計已經成為區分專業網站的重要指標。 透過 View Transition API，我們終於能夠輕鬆實現那些過去需要耗費大量時間的複雜轉場效果。

想請問一下這個網站的換頁特效：https://www.studiorhe.com/ 可以看到當我們點about的時候會切到 https://www.studiorhe.com/about 同時會有由下往上的slide效果，我想請問的是該怎麼去實作類似的效果？