作者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/cn.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