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

作者: minminpp (咪咪霹霹)   2023-07-28 12:42:52
想請問一下這個網站的換頁特效:https://www.studiorhe.com/
可以看到當我們點about的時候會切到 https://www.studiorhe.com/about
同時會有由下往上的slide效果,我想請問的是該怎麼去實作類似的效果?
也就是當舊的頁面往上的同時,新的頁面也進來了,我目前猜測這網站是
用現成的library做的,但因為我目前才剛學習這塊,非常不熟悉,而我目前
只有研究出用 @keyframes from to 去做簡單的transition,但要能同時
舊的頁面滑出,新的頁面滑進來,就完全沒想法了。
另一方面,不換頁,應該沒問題,但是想了解要是要換頁這樣的效果要怎麼做?
先謝謝各位的指教!
作者: LoveMoon (我不是魔獸三國作者.....)   2023-07-28 21:03:00
spa nuxtssr 的基本不用想了
作者: minminpp (咪咪霹霹)   2023-07-29 00:30:00
感謝,明白了!
作者: t520131412 (羽)   2023-07-29 10:45:00
視差滾動
作者: kyoe (緣份‧不再)   2023-07-31 16:28:00
https://reurl.cc/51L5eG 主要是css跟js的設計,跟spa/ssr沒甚麼關係, google kw:page load effect
作者: LoveMoon (我不是魔獸三國作者.....)   2023-08-01 22:40:00
你如果換頁會 reload 怎麼做到兩頁同時存在並交錯?
作者: minminpp (咪咪霹霹)   2023-08-01 23:20:00
是的,所以我覺得一樓說的比較對,這會需要預載每個頁面,所以ssr無法做到。page load effect 會有前一頁結束的效果或是後一頁開始的效果,但兩者無法同時觸發
作者: kyoe (緣份‧不再)   2023-08-02 09:08:00
該怎麼說呢,ssr也可以做成一頁然後用js去達成效果,不一定只能用spa來做,所以我才說跟spa/ssr沒關係,主要是css&js的處理找個 example 參考看看:https://reurl.cc/GAq9Wx
作者: minminpp (咪咪霹霹)   2023-08-02 10:36:00
是的,網址不變就做的到
作者: adzc2568 (白紊)   2023-08-02 18:04:00
答案就是 spa。k 大說的沒錯, spa 和 ssr 又不相斥,現行前端各大框架包含一樓的 nuxt 不都是如此?
作者: ctah (藍寶)   2023-08-03 20:00:00
但SSR很難做到換頁動畫銜接的像SPA那樣完美吧
作者: sp063439 (Isk)   2023-08-11 07:55:00
這跟server side有什麼關係? 就是單純 spa
作者: ReadSnow (AnnyCat)   2023-08-11 23:29:00
spa可以做得更流暢,但不用spa也可以做出來載入特效CSS跟JS就可以控制,只是某些地方會有明顯載入痕跡以前有陣子一些大飯店的官方網站都喜歡這樣的特效也都不是SPA如果是內容很少的一頁式網站,也可以做到這樣的切換就是把頁面當成輪播器就好

Links booklink

Contact Us: admin [ a t ] ucptt.com