我是@nyaomaru,一名前端工程師。曾經(jīng)在荷蘭家里烤叉燒時觸發(fā)火警,嚇得手忙腳亂。 這次我想聊聊怎么給Necoz B.V.做企業(yè)官網(wǎng)的。
Necoz B.V.是荷蘭阿姆斯特丹的一家軟件開發(fā)工作室,做系統(tǒng)設(shè)計(jì)、干凈架構(gòu)和可擴(kuò)展的網(wǎng)頁應(yīng)用。給自家建站,我定了三條硬指標(biāo):不破壞SEO、動畫要舒服、移動端不能崩。這三條一擺,問題就不是"用什么技術(shù)",而是"哪層該管什么事"。
![]()
技術(shù)棧選了Astro、React島嶼(React Islands)和TypeScript。Astro負(fù)責(zé)靜態(tài)生成,SEO底子穩(wěn);React島嶼把交互組件孤立出來, hydration范圍可控;TypeScript兜底類型安全。這套組合不算新鮮,但對付企業(yè)官網(wǎng)的"既要又要",剛好夠用。
最頭疼的是滾動動畫。AI確實(shí)幫了大忙——出思路快,給初稿也快。但生成的動畫直接拿來用?不行。曲線生硬、節(jié)奏違和、移動端直接穿幫。AI能幫你跑起來,但跑得好不好看,它不管。
最后我自己設(shè)計(jì)了動畫系統(tǒng):自定義滾動邏輯(custom scroll logic)配合walker動畫機(jī)制,把動畫狀態(tài)從組件里抽出來,單獨(dú)一層管理。滾動位置驅(qū)動進(jìn)度,進(jìn)度映射到變換參數(shù),再喂給CSS或requestAnimationFrame。這樣SSR的時候不執(zhí)行,hydration之后接管,SEO和性能兩邊不耽誤。
倉庫開源了,鏈接在文內(nèi)。用手機(jī)打開看看效果,動畫應(yīng)該還能看。
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺“網(wǎng)易號”用戶上傳并發(fā)布,本平臺僅提供信息存儲服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.