这篇内容的交互设计藏着巧思——通过滑动交互的逻辑，让小人从年头“跑”到年尾。动静之间，用户仿佛身临其境，像跟着这个穿梭的小人一起走进这一年的大事件里，让枯燥乏味的年终回顾变得有趣起来。

其核心用到的还是咱们熟悉的「三层滑动」结构：底层背景与顶层图滑动，中间层的小人元素保持固定。利用这样的效果设计，让用户滑动时能直观感受到“回顾过往”的视觉效果。

类似的滑动效果还有很多，比如《红船依旧，共赴山川》，也能通过三层滑动实现。有细心的朋友问：“这篇里的红船滑动时没有「穿梭」感，和人民网小人穿梭的效果差别好明显？”其实这篇文章用的是双层滑动结构——小船固定不动，仅背景图滑动。那为什么说它能用三层滑动实现？

很简单：在顶层图中上传一张和背景图尺寸一致的透明图，这样就利用三层上滑效果，制作出双层滑动了。

点击跳转文章阅读

复刻人民网这篇效果，我们需要用到135SVG编辑器中的三层滑动（中间层不动顶层底层竖向）效果来实现。组件ID：31

●进入SVG编辑器界面

点击编辑器页面左侧「SVG编辑」，进入SVG编辑器页面，在搜索框中输入效果ID，即可使用。

同理，若是小人没有被遮挡，该图层作为背景图，需在顶层图中上传一张和背景图同尺寸的透明底图。

●同步到公众号后台

选择右上角的「同步」功能，将标题、封面图设置好并选择需要同步的公众号，就能让这篇SVG内容同步到公众号后台。