常見的網站頁面切換特效有，透明度變化、頁面位移變化、或者放上一個讀取 Spinner 等等。但以上這些對現在的使用者來說過於普通了，而且頁面切換是一個非常好的時間點置入品牌視覺，如果只做一個不相干的 Spinner，實在是非常浪費了這個空間。
在較於注重形象的網站，適當的加入各種品牌元素、視覺，能非常好的提升使用者對於該品牌的細心與感受。
傳統常用網站換頁特效
頁面切換時有幾個非常重要的時刻，離場時 → 中間等待時 → 進場時，這三個步驟是最常見的流程。
1. 離場時、進場時
在頁面離場時能做與進場時相對應的設計，例如整體網站想要做翻頁的感覺，離場時，我們可以利用 css transform translate 移動向左方移動，進場時再從右方向左移動進來。這兩個步驟必須得是相呼應一組的。
這裡推薦一個很基礎的頁面切換範例組合 https://tympanus.net/Development/PageTransitions/ ，在此範例中可以看到許多翻頁感的頁面切換特效。在此範例網站中，如果你仔細觀察會發現，換頁的細節其實並沒有那麼簡單。
範例中每一個範例離場時可能會有兩種或者以上的特效加在一起，例如離場時頁面往左邊移動，並且透明度變 0，背景壓個黑色底色，此時就能有整個頁面往左移動並且變暗，讓使用者眼睛聚焦到進場頁面，而漸漸的去忽略離場頁面。
2. 中間等待時
如果你的網站速度飛快，並且你的品牌形象或者你的網站體驗不想在這時注入任何東西，那就不一定要使用中間等待的特效。但這在技術上有一定程度的難度，並沒有太多的工程師能完美做到，由於頁面切換關係到前端工程師與後端工程的共同合作。
你以為的網站設計特效、互動、動畫，就是那麼一兩秒。但其實工程師為了這一兩秒可能要花上一週兩週。
要達到這種無縫接軌的技術，需要做的事前架構準備非常多，在這邊就先講講傳統程式（非 Headless）的做法，傳統的網站是統一由後端渲染前端頁面，首先後端要能有個資料夾是存取已經渲染好的 HTML、CSS、Javascript 檔案，預先儲存起來，當要調取該頁面時就不用再重新渲染。
這時候前端工程師需要準備切分好幾個 HTML，當離場時將原本頁面的 HTML 先準備離開 → 這時候進行頁面切換讀取下一個頁面 → 當下個頁面讀取好時，這時將原本頁面開始跑動畫離場，並且在離場完之後移除 → 下一個頁面進場。工程師要非常熟悉各種 Promise 的等待、進行、結束。
好加在，傳統後端渲染網站的方式，已有許多工具可以達成，例如爸爸 js https://barba.js.org/ ，其實原本想寫的是如何使用 barba.js，但有很多情況需要花時間製作範例，這邊就先推薦工具就好。使用 barba.js 你可以將原本都是 ASP.NET 、PHP 渲染的頁面輕鬆做到滑順的頁面轉場。
但你的網站速度無法達到以上的飛快技術，建議還是需要特別去設計離場、進場。例如我們的作品案例 https://e-s.tw/works/guiji-drinks 龜記飲品，就是在非常早期時，使用傳統 WordPress 主題所製作，我們將所有的 <a href=""></a> 連結先防止動作，加上頁面離場特效，當特效跑完時再跑連結換頁，最後製作每頁的進場特效。
創意網站換頁特效
在這個越來越難抓住、越來越難滿足使用者的時代，全世界頂尖高手們也開創了更多創意性的換頁體驗特效。你可以發現明明很簡單的事情...大家卻把它越做越難啊 ~ 😵這就是細節的重要性，市場競爭的激烈，當然在細節上就要更加琢磨。
根據 Awwwards 這篇範例文章 Page Transition Examples 可以看到很多更屌更有創意的做法，裡面不外乎高成本的應用了許多 3D、煙霧、Shader、空間、筆刷。這也是我們一直在嘗試希望能找到願意與世界接軌的客戶，與我們一起創作更多的突破式體驗。
Awwwards 還有另外每日更新的換頁特效案例可以參考，Transitions Collection
更多離場、進場的小細節
再來就是更多細節的部分，離場、進場能做的設計，不僅僅只有頁面離開頁面進入，甚至還能增加做到各種元素上。在這又可以拆分多出兩個步驟，元素的離場 → 頁面離場 → 等待中讀取 → 頁面進場 → 元素進場，這其實才算是一個完整的流程。
通常我們在滾動頁面時，會製作當元素進入視窗時，進行漸變進入等特效。如果這個特效不要使用 CSS Animation 我指的是使用例如 animation: fadeUp 0.3s 這種方式，而是用 Class 去驅動。這樣的好處是，當你移除 Class 時他可以再多跑一個返回原本狀態的特效。這時你就能輕鬆的將元素離開進場用頁面狀態來驅動。
對使用者來說，其實感受到的並不多，但如果這樣做，能為細節再添加更多的加分。
市面上有非常多方式可以做到換頁特效
除了上述的爸爸js，如果你與 ES 的工程師一樣強的話，也可以自己客製化寫出自己的架構，或者使用 React.js 框架。
ES 目前所使用的架構是 Nuxt3 x WordPress 的 Headless 技術，可以嘗試看看使用我們已整合好的 Nuxt3 x WordPress 結構，永久免費開源給大家使用 https://github.com/esdesignstudio/es-nuxt3-template ，目前不定期會增加更新與維護。
