撕日历SVG效果教程:公众号推文创意设计与应用指南

本文详细介绍撕日历SVG效果的实现方法与应用场景,帮助公众号创作者提升推文视觉效果。通过撕日历SVG技术,实现点击换图、自动展开等互动效果,丰富内容展示形式,提升用户阅读体验。适合年终总结、春节活动、产品推广等多种场景使用。


「撕日历」效果应该怎么做?
搜索
全程网办
撕撕撕把一切都撕掉






嗨~宝子们今天又到了咱们学习新SVG效果的时间了,之前不少宝子一直在问「撕日历」效果怎么实现,今天三儿「讲一送一」不仅有常规「撕日历」效果还有点击换图「撕日历」效果。


撕日历效果适用场景:多内容展示、可以是商品展示、也可以是词条介绍或是人物介绍,应用场景广泛,若是再搭配展开,还能嵌套更多效果,丰富文章内容。







01



海尔集团






5CED5134-AE96-4784-99AD-AAC3F4189209.gif


海尔集团





《一本日历,回看海尔2024》

>点击查看原文<


海尔集团利用日历原始时间属性,从1月到12月展示这一年来海尔的工作与收获,读者一页页撕掉日历,不仅看到了海尔集团的进步,也感受到了时间流逝,这是撕日历效果的常规使用方式,适合年终总结。


组件:点击掉落换图

组件ID:240


组件搜索:SVG编辑器中搜索使用


image.png





02



盒马X会员店






9E16955A-7E1F-4BBE-8AF3-0B4EEE5F9C8E_compressed.gif


盒马X会员店





《躺赢春节高端局》

>点击查看原文<


盒马在春节前夕利用日历结合传统风俗再搭配盒马产品,浑然天成并不让人感到突兀,而且推荐内容也是春节假期刚需符合用户群体的需求习惯,最后还有自动展开内容,里面设置了互动环节,有利于提高用户活跃度,增加粉丝粘性。


组件:点击换图(左右掉落)+展开

组件ID:357


组件搜索:SVG编辑器中搜索使用


image.png



03



GQ实验室







D3E042D6-E92B-4C7D-B2C9-78C8FAA543DA_compressed.gif


智族Lab





《年前开撕》

>点击查看原文<


GQ实验室(现改名智族Lab)将「撕日历」效果玩到了极致,过去大家只是单图掉落,而GQ在撕日历的基础上加上了换图。同样也是春节前夕的内容,换图后由职场人会心一笑的话题组成,最后自动展开部分带出广告内容,商业广告与主题内容并不突兀,并不会让读者反感反而是更期待GQ的恰饭内容。


组件:点击换图(多效果过渡) + 自动展开

组件ID:985


组件搜索:SVG编辑器中搜索使用


image.png



以上就是今天

三儿给大家带来「撕日历」的全部效果啦

大家还有什么想看想学的

记得在评论区留言噢



·



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