北京
我是@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.
