作者minminpp (咪咪霹霹)
看板Web_Design
標題[問題] 想請教這個網站的換頁特效怎麼實作
時間Fri Jul 28 12:42:52 2023
想請問一下這個網站的換頁特效：
https://www.studiorhe.com/
可以看到當我們點about的時候會切到
https://www.studiorhe.com/about
同時會有由下往上的slide效果，我想請問的是該怎麼去實作類似的效果？
也就是當舊的頁面往上的同時，新的頁面也進來了，我目前猜測這網站是
用現成的library做的，但因為我目前才剛學習這塊，非常不熟悉，而我目前
只有研究出用 @keyframes from to 去做簡單的transition，但要能同時
舊的頁面滑出，新的頁面滑進來，就完全沒想法了。
另一方面，不換頁，應該沒問題，但是想了解要是要換頁這樣的效果要怎麼做？
先謝謝各位的指教！
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 136.55.187.253 (美國)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1690519374.A.A4C.html
1F：推 LoveMoon: spa nuxt 07/28 21:03
2F：→ LoveMoon: ssr 的基本不用想了 07/28 21:04
3F：→ minminpp: 感謝，明白了！ 07/29 00:30
4F：推 t520131412: 視差滾動 07/29 10:45
6F：→ kyoe: 甚麼關係, google kw:page load effect 07/31 16:28
7F：推 LoveMoon: 你如果換頁會 reload 怎麼做到兩頁同時存在並交錯？ 08/01 22:40
8F：→ minminpp: 是的，所以我覺得一樓說的比較對，這會需要預載每個頁 08/01 23:20
9F：→ minminpp: 面，所以ssr無法做到。page load effect 會有前一頁結 08/01 23:21
10F：→ minminpp: 束的效果或是後一頁開始的效果，但兩者無法同時觸發 08/01 23:21
11F：→ kyoe: 該怎麼說呢,ssr也可以做成一頁然後用js去達成效果,不一定只 08/02 09:08
12F：→ kyoe: 能用spa來做,所以我才說跟spa/ssr沒關係,主要是css&js的處理 08/02 09:08
14F：→ minminpp: 是的，網址不變就做的到 08/02 10:36
15F：→ adzc2568: 答案就是 spa。k 大說的沒錯， spa 和 ssr 又不相斥，現 08/02 18:04
16F：→ adzc2568: 行前端各大框架包含一樓的 nuxt 不都是如此？ 08/02 18:04
17F：→ ctah: 但SSR很難做到換頁動畫銜接的像SPA那樣完美吧 08/03 20:00
18F：推 sp063439: 這跟server side有什麼關係? 就是單純 spa 08/11 07:55
19F：→ ReadSnow: spa可以做得更流暢，但不用spa也可以做出來 08/11 23:29
20F：→ ReadSnow: 載入特效CSS跟JS就可以控制，只是某些地方會有明顯載入 08/11 23:30
21F：→ ReadSnow: 痕跡 08/11 23:30
22F：→ ReadSnow: 以前有陣子一些大飯店的官方網站都喜歡這樣的特效 08/11 23:31
23F：→ ReadSnow: 也都不是SPA 08/11 23:31
24F：→ ReadSnow: 如果是內容很少的一頁式網站，也可以做到這樣的切換 08/11 23:35
25F：→ ReadSnow: 就是把頁面當成輪播器就好 08/11 23:36