[問題] 想請教這個網站的換頁特效怎麼實作

[minminpp (咪咪霹霹)]

想請問一下這個網站的換頁特效：https://www.studiorhe.com/

可以看到當我們點about的時候會切到 https://www.studiorhe.com/about

同時會有由下往上的slide效果，我想請問的是該怎麼去實作類似的效果？

也就是當舊的頁面往上的同時，新的頁面也進來了，我目前猜測這網站是

用現成的library做的，但因為我目前才剛學習這塊，非常不熟悉，而我目前

只有研究出用 @keyframes from to 去做簡單的transition，但要能同時

舊的頁面滑出，新的頁面滑進來，就完全沒想法了。

另一方面，不換頁，應該沒問題，但是想了解要是要換頁這樣的效果要怎麼做？

先謝謝各位的指教！

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 136.55.187.253 (美國)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1690519374.A.A4C.html
推 LoveMoon: spa nuxt
→ LoveMoon: ssr 的基本不用想了
→ minminpp: 感謝，明白了！
推 t520131412: 視差滾動
推 kyoe: https://reurl.cc/51L5eG 主要是css跟js的設計,跟spa/ssr沒
→ kyoe: 甚麼關係, google kw:page load effect
推 LoveMoon: 你如果換頁會 reload 怎麼做到兩頁同時存在並交錯？
→ minminpp: 是的，所以我覺得一樓說的比較對，這會需要預載每個頁
→ minminpp: 面，所以ssr無法做到。page load effect 會有前一頁結
→ minminpp: 束的效果或是後一頁開始的效果，但兩者無法同時觸發
→ kyoe: 該怎麼說呢,ssr也可以做成一頁然後用js去達成效果,不一定只
→ kyoe: 能用spa來做,所以我才說跟spa/ssr沒關係,主要是css&js的處理
→ kyoe: 找個 example 參考看看：https://reurl.cc/GAq9Wx
→ minminpp: 是的，網址不變就做的到
→ adzc2568: 答案就是 spa。k 大說的沒錯， spa 和 ssr 又不相斥，現
→ adzc2568: 行前端各大框架包含一樓的 nuxt 不都是如此？
→ ctah: 但SSR很難做到換頁動畫銜接的像SPA那樣完美吧
推 sp063439: 這跟server side有什麼關係? 就是單純 spa
→ ReadSnow: spa可以做得更流暢，但不用spa也可以做出來
→ ReadSnow: 載入特效CSS跟JS就可以控制，只是某些地方會有明顯載入
→ ReadSnow: 痕跡
→ ReadSnow: 以前有陣子一些大飯店的官方網站都喜歡這樣的特效
→ ReadSnow: 也都不是SPA
→ ReadSnow: 如果是內容很少的一頁式網站，也可以做到這樣的切換
→ ReadSnow: 就是把頁面當成輪播器就好