[问题] 想请教这个网站的换页特效怎么实作

楼主: 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