欢迎光临散文网 会员登陆 & 注册

推荐适合元宵的SVG模版

2023-05-30 15:03 作者:黑科技编辑器  | 我要投稿

宝藏模版

往期推荐(点击阅读):

🤡推荐几个莫名好玩的SVG模版🤡

🤩推荐几个瞬间高大上的SVG模版🤩

🤗推荐几个敲级可爱的SVG模版🤗

🧐推荐适合年终总结的SVG模版🧐

⏰推荐可无限循环的SVG模版⏰

🧡推荐适合情人节的SVG模版🧡

🦋推荐适合女神节的SVG模版🦋

🧈推荐几个无比丝滑的SVG模版🧈

👍6种「等分容器滑动」的妙用👍

🛹13种精妙的「图片轮播」特效🛹

🦄推荐几个童趣满满的SVG模版🦄

🤑618排版必备SVG模版🤑

🤠属于爸爸们的SVG模版🤠

🤝推荐又红又专的SVG模版🤝

🥮推荐适合中秋的SVG模版🥮

⌛推荐适合双11的SVG模版⌛

🥇推荐适合世界杯的SVG模版🥇

🤶推荐适合圣诞节的SVG模版🤶

🥳推荐适合新年的SVG模版🥳

🧧推荐兔年春节的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),会的比别人多一点

官网链接:www.e2.cool


推荐适合元宵的SVG模版的评论 (共 条)

分享到微博请遵守国家法律