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

看板Web_Design作者 (咪咪霹霹)時間1年前 (2023/07/28 12:42), 編輯推噓5(5020)
留言25則, 8人參與, 1年前最新討論串1/1
想請問一下這個網站的換頁特效: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

07/28 21:03, 1年前 , 1F
spa nuxt
07/28 21:03, 1F

07/28 21:04, 1年前 , 2F
ssr 的基本不用想了
07/28 21:04, 2F

07/29 00:30, 1年前 , 3F
感謝,明白了!
07/29 00:30, 3F

07/29 10:45, 1年前 , 4F
視差滾動
07/29 10:45, 4F

07/31 16:28, 1年前 , 5F
https://reurl.cc/51L5eG 主要是css跟js的設計,跟spa/ssr沒
07/31 16:28, 5F

07/31 16:28, 1年前 , 6F
甚麼關係, google kw:page load effect
07/31 16:28, 6F

08/01 22:40, 1年前 , 7F
你如果換頁會 reload 怎麼做到兩頁同時存在並交錯?
08/01 22:40, 7F

08/01 23:20, 1年前 , 8F
是的,所以我覺得一樓說的比較對,這會需要預載每個頁
08/01 23:20, 8F

08/01 23:21, 1年前 , 9F
面,所以ssr無法做到。page load effect 會有前一頁結
08/01 23:21, 9F

08/01 23:21, 1年前 , 10F
束的效果或是後一頁開始的效果,但兩者無法同時觸發
08/01 23:21, 10F

08/02 09:08, 1年前 , 11F
該怎麼說呢,ssr也可以做成一頁然後用js去達成效果,不一定只
08/02 09:08, 11F

08/02 09:08, 1年前 , 12F
能用spa來做,所以我才說跟spa/ssr沒關係,主要是css&js的處理
08/02 09:08, 12F

08/02 09:15, 1年前 , 13F
找個 example 參考看看:https://reurl.cc/GAq9Wx
08/02 09:15, 13F

08/02 10:36, 1年前 , 14F
是的,網址不變就做的到
08/02 10:36, 14F

08/02 18:04, 1年前 , 15F
答案就是 spa。k 大說的沒錯, spa 和 ssr 又不相斥,現
08/02 18:04, 15F

08/02 18:04, 1年前 , 16F
行前端各大框架包含一樓的 nuxt 不都是如此?
08/02 18:04, 16F

08/03 20:00, 1年前 , 17F
但SSR很難做到換頁動畫銜接的像SPA那樣完美吧
08/03 20:00, 17F

08/11 07:55, 1年前 , 18F
這跟server side有什麼關係? 就是單純 spa
08/11 07:55, 18F

08/11 23:29, 1年前 , 19F
spa可以做得更流暢,但不用spa也可以做出來
08/11 23:29, 19F

08/11 23:30, 1年前 , 20F
載入特效CSS跟JS就可以控制,只是某些地方會有明顯載入
08/11 23:30, 20F

08/11 23:30, 1年前 , 21F
痕跡
08/11 23:30, 21F

08/11 23:31, 1年前 , 22F
以前有陣子一些大飯店的官方網站都喜歡這樣的特效
08/11 23:31, 22F

08/11 23:31, 1年前 , 23F
也都不是SPA
08/11 23:31, 23F

08/11 23:35, 1年前 , 24F
如果是內容很少的一頁式網站,也可以做到這樣的切換
08/11 23:35, 24F

08/11 23:36, 1年前 , 25F
就是把頁面當成輪播器就好
08/11 23:36, 25F
文章代碼(AID): #1amqTEfC (Web_Design)
文章代碼(AID): #1amqTEfC (Web_Design)