這篇內(nèi)容的交互設(shè)計藏著巧思——通過滑動交互的邏輯，讓小人從年頭“跑”到年尾。動靜之間，用戶仿佛身臨其境，像跟著這個穿梭的小人一起走進這一年的大事件里，讓枯燥乏味的年終回顧變得有趣起來。

其核心用到的還是咱們熟悉的「三層滑動」結(jié)構(gòu)：底層背景與頂層圖滑動，中間層的小人元素保持固定。利用這樣的效果設(shè)計，讓用戶滑動時能直觀感受到“回顧過往”的視覺效果。

類似的滑動效果還有很多，比如《紅船依舊，共赴山川》，也能通過三層滑動實現(xiàn)。有細(xì)心的朋友問：“這篇里的紅船滑動時沒有「穿梭」感，和人民網(wǎng)小人穿梭的效果差別好明顯？”其實這篇文章用的是雙層滑動結(jié)構(gòu)——小船固定不動，僅背景圖滑動。那為什么說它能用三層滑動實現(xiàn)？

很簡單：在頂層圖中上傳一張和背景圖尺寸一致的透明圖，這樣就利用三層上滑效果，制作出雙層滑動了。

點擊跳轉(zhuǎn)文章閱讀

復(fù)刻人民網(wǎng)這篇效果，我們需要用到135SVG編輯器中的三層滑動（中間層不動頂層底層豎向）效果來實現(xiàn)。組件ID：31

●進入SVG編輯器界面

點擊編輯器頁面左側(cè)「SVG編輯」，進入SVG編輯器頁面，在搜索框中輸入效果ID，即可使用。

同理，若是小人沒有被遮擋，該圖層作為背景圖，需在頂層圖中上傳一張和背景圖同尺寸的透明底圖。

●同步到公眾號后臺

選擇右上角的「同步」功能，將標(biāo)題、封面圖設(shè)置好并選擇需要同步的公眾號，就能讓這篇SVG內(nèi)容同步到公眾號后臺。