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

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

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

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

點擊跳轉文章閱讀

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

●進入SVG編輯器界面

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

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

●同步到公眾號后臺

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