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

看板Web_Design作者 (咪咪霹霹)時間9月前 (2023/07/28 12:42), 編輯推噓5(5推 0噓 20→)
留言25則, 8人參與, 8月前最新討論串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, 9月前 , 1F
spa nuxt
07/28 21:03, 1F
→
07/28 21:04, 9月前 , 2F
ssr 的基本不用想了
07/28 21:04, 2F
→
07/29 00:30, 9月前 , 3F
感謝，明白了！
07/29 00:30, 3F
推
07/29 10:45, 9月前 , 4F
視差滾動
07/29 10:45, 4F
推
07/31 16:28, 9月前 , 5F
https://reurl.cc/51L5eG 主要是css跟js的設計,跟spa/ssr沒
07/31 16:28, 5F
→
07/31 16:28, 9月前 , 6F
甚麼關係, google kw:page load effect
07/31 16:28, 6F
推
08/01 22:40, 9月前 , 7F
你如果換頁會 reload 怎麼做到兩頁同時存在並交錯？
08/01 22:40, 7F
→
08/01 23:20, 9月前 , 8F
是的，所以我覺得一樓說的比較對，這會需要預載每個頁
08/01 23:20, 8F
→
08/01 23:21, 9月前 , 9F
面，所以ssr無法做到。page load effect 會有前一頁結
08/01 23:21, 9F
→
08/01 23:21, 9月前 , 10F
束的效果或是後一頁開始的效果，但兩者無法同時觸發
08/01 23:21, 10F
→
08/02 09:08, 9月前 , 11F
該怎麼說呢,ssr也可以做成一頁然後用js去達成效果,不一定只
08/02 09:08, 11F
→
08/02 09:08, 9月前 , 12F
能用spa來做,所以我才說跟spa/ssr沒關係,主要是css&js的處理
08/02 09:08, 12F
→
08/02 09:15, 9月前 , 13F
找個 example 參考看看：https://reurl.cc/GAq9Wx
08/02 09:15, 13F
→
08/02 10:36, 9月前 , 14F
是的，網址不變就做的到
08/02 10:36, 14F
→
08/02 18:04, 9月前 , 15F
答案就是 spa。k 大說的沒錯， spa 和 ssr 又不相斥，現
08/02 18:04, 15F
→
08/02 18:04, 9月前 , 16F
行前端各大框架包含一樓的 nuxt 不都是如此？
08/02 18:04, 16F
→
08/03 20:00, 9月前 , 17F
但SSR很難做到換頁動畫銜接的像SPA那樣完美吧
08/03 20:00, 17F
推
08/11 07:55, 8月前 , 18F
這跟server side有什麼關係? 就是單純 spa
08/11 07:55, 18F
→
08/11 23:29, 8月前 , 19F
spa可以做得更流暢，但不用spa也可以做出來
08/11 23:29, 19F
→
08/11 23:30, 8月前 , 20F
載入特效CSS跟JS就可以控制，只是某些地方會有明顯載入
08/11 23:30, 20F
→
08/11 23:30, 8月前 , 21F
痕跡
08/11 23:30, 21F
→
08/11 23:31, 8月前 , 22F
以前有陣子一些大飯店的官方網站都喜歡這樣的特效
08/11 23:31, 22F
→
08/11 23:31, 8月前 , 23F
也都不是SPA
08/11 23:31, 23F
→
08/11 23:35, 8月前 , 24F
如果是內容很少的一頁式網站，也可以做到這樣的切換
08/11 23:35, 24F
→
08/11 23:36, 8月前 , 25F
就是把頁面當成輪播器就好
08/11 23:36, 25F
‣ 更多 minminpp 的文章
文章代碼(AID): #1amqTEfC (Web_Design)