多层滑动推文设计教程：品牌案例解析+SVG实现技巧
深度解析最高人民法院、茶理宜世、CoCo都可等品牌的多层滑动推文设计案例，揭秘三层滑动、小元素移入、竖向3D斜切等SVG交互效果实现方法，附组件ID及素材要求，助你打造高互动性创意推文，提升品牌内容吸引力！
近期又有什么有趣的推文呢？
之前三儿发现大家很喜欢
双（三）层滑动
搭配画面可玩性很多
最近三儿又发现一些推文
在双（三）层滑动的基础上
又有些新的玩法
一起来看看吧
最高人民法院利用小元素自动移入+双层滑动回顾与总结人民法院案例库上线一年来取得的成就，本文有两个特点，一是小元素的自动移入搭配法官人物步行并不突兀，二是法官（固定元素）并没有在常规的居中而是文章侧边，能作为文章一个小小吸睛亮点但并不会喧宾夺主，弱化本文主题内容。
组件：三层滑动（小元素移入）+顶层底层上下滑动
组件ID：988
组件搜索：SVG编辑器内搜索
效果答疑
疑问一：原文是双层滑动为什么你要用三层滑动？
答疑：三层滑动可以向下兼容双层滑动，我们顶层可以不放入图片或者上传同滑动图尺寸的透明图就行
疑问二：小元素素材有什么要求吗？
小元素的宽度需要与滑动图的宽度一致，高度尽量不超过第一张滑动图的高度，同时小元素的位置需要提前确定,这样叠上去才能确保小元素一直固定在滑动图的左侧。
元素图示例
部分滑动图示例
茶理宜世就是经典的三层滑动，中间层（小元素）固定、底层和顶层滑动，这个和以往不同的点在于有一个自动移入的效果，同时它的小元素恰好就是常规的居中位置，更多巧思还是在设计上，比如适当的顶层图有遮挡实现「穿透」效果，三层滑动效果简单但出圈非常推荐大家在推文中使用。
组件：三层滑动（小元素移入）+顶层底层上下滑动
组件ID：988
组件搜索：SVG编辑器内搜索
都可这篇并不是常规三层滑动，而是使用竖向3D斜切滑动。顶部图是都可的杯子，通过设置倾斜角度来实现滑动图片滑进杯中，趣味性拉满，推文也更显得活泼有趣。根据这个案例我们还可以拓展创意思路，例如顶层图是垃圾桶我们滑入各类垃圾或是顶层图是碎纸机我们粉碎各种谣言或是坏心情等等，该效果可搭配的创意颇多等待各位去探寻。
组件：三层滑动（竖向3d斜切）+点击不可弹出
组件ID：558
以上就是今天
三儿给大家带来「滑滑滑」的全部效果啦
大家还有什么想看想学的
记得在评论区留言噢
立即登录
