推荐适合元宵的SVG模版

宝藏模版
往期推荐(点击阅读):
各位 E2.COOL 的会员,编辑器内 900+ 的 SVG 组件你们都用过吗?临近兔年元宵,各色具备解谜特性的交互 SVG 必将大放异彩,那么本期就具体来看看哪些组件值得应用吧!
宫格分栏+滑动模块
以玛莎拉蒂的《元宵节“拼”一把!》为例,将宫格与滑动结合,形成类似拼图的互动情景,能将产品图或海报以更具互动感的方式呈现给用户。

其搭建结构也非常简单。如一个九宫格的拼图效果,只需在「九宫格」组件各个嵌套区内放入「无限图片滑动」即可:

抽签特效+弹出式海报等
以定制(by 意符文化)案例宝马的《放开那个元宵》为典型,如果将某个或某几个抽签画面留空,露出下层的弹出式海报,则会形成另一种有趣的解谜式互动——长按画面,只有停留在特定序列才能点击弹出海报。

那么这种结构是如何实现的?结合「零高容器」,我们将下层互动(如弹出式海报)与抽签结构叠加即可:

至于留空的签,建议选择最后或相对接近最后的一个或几个签不传,避免交互层面存在误触问题。当然,宝马中国的原作属于定制案例,有更高频的序列帧刷新和更细节的画面分层设计。
这里重点在于启发各位读者们的思路——此处的弹出式海报,也可以替换为其他类型的互动。不妨大胆设想比如结合「任意动画接伸长」进行伸长接续,或者叠加「切换图片+播放音频」等形成更多自己的独创 SVG 设计。
GIF 控制器
如果品牌设计师已经制作了精妙的元宵动画,那么通过对 GIF 图的控制播放就足以形成优质的交互体验,如喜茶《元宵笑「盐」开,买一送一》中的灯谜翻转效果:

在 E2.COOL 的组件搜索功能内查找「GIF控制器」即可体验!一般来说,建议在 PS 中导出该 GIF 时设置为「仅一次播放」喔!
双面翻转
你也可以选择通过纯 SVG 代码执行的翻转去模拟猜灯谜的互动效果,以定制(by 交互实验室)案例荣耀的《正月十五,当元宵灯谜遇上谐音梗》为典型,它通过「放大消失」+「双面翻转」的效果组合形成了解谜的递进感。

我们同样通过「零高容器」的叠加能力模拟上述效果。由于双面翻转后需要画面可被点击前往无图标小程序,因此第二个零高容器应筛选成「穿透」式。小程序附着在最底层的背景图即可:

视差滑动
如果我们以月亮为切入点,同样可以打造曼妙的阅读氛围。这里尤其推荐参考 Vogue 的《古驰宇宙向你发来邀请》佳作,它基于 E2.COOL 黑科技 SVG 编辑器排版而成,通过视差滑动形成了裸眼 3D 般的互动感官:

标签抽拉
知名交互设计师 @GL 先生设计「标签抽拉」组件在元宵节中也可以作为猜灯谜的应用形式。以福特汽车的《元宵灯谜,「禽」您来猜》为例,它以多个谜题的谜底组合为线索,让产品广告有机融合到了节日活动中:

在 E2.COOL 的组件搜索功能内查找「标签抽拉」即可体验!该组件为 UGC 原创组件,任何会员均可单独购买使用喔!
三折页立体广告
由知名新媒体艺术研究机构 JZ Creative Studio 独家授权至平台的「三折页立体广告」或许是在形态上最符合花灯的多图展示动画:

在 E2.COOL 的组件搜索功能内查找「三折页立体广告」即可体验!其中的每张图片都可另外附加超链接,具备真正的 3D 视角轮播感官,结合适当的浮层设计就能形成花灯轮播的效果。
为确保画面变形的可控性,建议设计正方形的花灯图,然后结合你的实际花灯设计样式,利用「占位」组件完成轮播装置的定位:


这里是黑科技编辑器(e2.cool),会的比别人多一点
