【SVG效果揭秘】公众号推文实现三层滑动教程

探索奈雪的茶如何巧妙运用三层滑动SVG效果,为公众号文章增添互动性和创新性。本文深入解析了如何通过滑动屏幕“写诗”,以及如何利用SVG三层上滑效果(ID:31)打造动态视觉体验。学习如何编辑和同步SVG组件,为你的公众号内容带来革命性的互动变革。立即掌握这些技巧,让你的公众号在众多竞争者中脱颖而出。




写在前面


今天要介绍的优质案例是来自茶饮头部品牌——奈雪的茶,该篇推文利用三层滑动效果与用户进行互动,让用户通过往下滑动屏幕来为文章“写诗”,在滑动的过程中让原本空白的部分,像卷轴上的文字、植物都会逐渐呈现紫色。相较于普通单层滑动、双层滑动来说,有趣性和创新性直接大大提高,从而让用户对品牌推文留下深刻印象。




点击上方图片跳转阅读👆






效果讲解




gif图展示


这篇文章利用SVG效果为三层上滑,ID为:31。利用三层上滑SVG与主题:写诗相结合,让用户体验用SVG写诗的乐趣。该效果有三个部分构成,分别是:最上层部分做成了镂空图片,中间部分为紫色图层,最下面则是背景图,能实现部分图片颜色渐显的重要原因就在于最顶层的镂空图片。


选择将该效果放在推文开头的位置,能吸引用户停留更多时间阅读全文内容。


除了利用三层上滑动做成上述效果外,咱们还可以全篇文章只用一个三层上滑效果来做创意。接下来我要介绍的这篇文章就是通过该效果做成条漫长图的新年愿望,在滑动的过程中,我们会跟随动态人物一步步的开启2023年的展望,在滑动至推文某部分时,动态人物还会穿梭门或者手机等元素,实现穿透的视觉体验。



gif图展示


《2023新年愿望清单》

点击上方橙色文字进行跳转



从这两篇优质案例,有这点值得我们学习:


多尝试与挖掘不同的排版形式。这两篇文章利用了文章长图与SVG特点相结合来排版,而不是让两者处于分散的状态,实现了1+1>2的效果。两篇文章都抓住了三层上滑SVG的特点,在做创意推文时,巧妙设计了图片的形态,比如在奈雪的茶中,将顶部图片设计为镂空状态,利于中间紫色色块的呈现。安利好口碑的推文中,将顶层部分设计为呈现穿梭视觉的png格式图片。






使用讲解



01
打开SVG组件


在SVG页面的【互动效果】的搜索框输入31或者是“三层上滑”,放入到编辑页面。



02
编辑SVG组件


① 这个效果由三个部分组成,第一个是中间固定图片,就是奈雪的茶中推文中紫色的色块部分,另外两部分,分别是顶层滑动图片和背景滑动图。



② 在前后双层滑动图部分,图片过长时可以将图片分割成几部分上传。



③ 需要注意的是,中间图层、顶部图层以及背景图层的图片宽度需要保持一致。


④ 制作完成后,点击右上角的【同步】【导出】到微信公众号后台。







三儿说


用惯了单层滑动,想要让推文内容有所变化,那大家可以在此基础上研究滑动系列的其它效果,进行大胆创新,不要拘泥于自己熟悉的效果,要适当跳出自己的舒适区,多尝试接受新效果。这期介绍的三层滑动效果很适合大家进行创作,除了做成上述新年愿望主题,像商场做成逛展览主题,旅游行业用来展示景区都是不错的选择,不同行业可以根据行业特色来进行思考。面对现在用户审美疲劳的情况,适当尝试和改变推文的风格,能给用户带来新鲜感,增强与用户之间的粘性。




以上就是三儿分享的全部内容啦

如果觉得还不错

记得点赞+在看

还有什么想看的内容

可以在下方评论区留言哦





END




文章申明:本文章转载自互联网公开渠道,如有侵权请联系我们删除
文章评价
登录后可以评论
立即登录
分享到