宝藏模版
各位 E2.COOL 的会员,编辑器内 1900+ 的 SVG正版组件你们都用过吗?中秋将紧随国庆的脚步而来,在开始阅读本期推荐之前,你还可以收藏既往的多期合集:
第一期|第二期|第三期
上色式滑动
月光如水,挥洒泼墨。《月圆圆圆圆圆圆圆圆圆圆》和《月圆人更圆》通过顶层滑动的布局方式,从透明处映出月光,形成了巧妙的连续填色效果:
这种滑动布局的巧思设计,是通过 E2 编辑器「顶层滑动」结合「纵向滑动」,采用局部镂空设计形成的。
-伸长
在案例《揭秘!月圆夜的大『明星』️朋友圈》中,『设计师』通过 E2 编辑器的「-伸长」既模拟了朋友圈的点赞效果,又体现了评论区的新增互动:
除此以外,你还可以点击阅读《教程|拟朋友圈式SVG交互设计》掌握更多逼真的朋友圈交互设计,通过这种拟态方式提升 SVG 效果的沉浸感。
任意点放大-消失+任意动画接伸长
《有多少"圆",就有多少种团圆》和《「给月亮的诗」月圆,人团圆》是 E2 编辑器中「任意动画接伸长」的典型应用:
关于它的具体应用方法,既可以阅读《一图看懂虚拟元宵灯会SVG排版|玩转任意动画接伸长》,也可以浏览优秀的第三方解析视频。
错层滑动
中秋佳节的选题下,「错层滑动」布局可谓经久不衰,年年相见。《邀您共赏一轮明月》和《这个中秋,开启逐月「其」旅》正如此:
它的开山鼻祖是第二届 E2 编辑器 1024 节冠军作品《月亮看见了》。关于这种滑动布局的具体方法,建议观看 Ceep 老师录制的专题视频。
可保存抽签-长按式
按一按屏幕,许愿自己获得一张中秋幸运签!《台风都吹不走的中秋上上签,快来抽!》的抽签 SVG 互动不仅可快速滚动,还能保存为本地图片:
在 E2 编辑器中,我们提供了大量的多形态抽签组件,你还可以使用:
1)黑科技编辑器 | 幸运抽签-双层教程
2)黑科技编辑器 | 幸运抽签-切换式教程
3)黑科技编辑器| 重复抽签教程
4)黑科技编辑器 | 双击抽签伸长教程
5)黑科技编辑器|视频号跳转美化抽签教程
6)UGC原创上新|幸运抽签-轮盘抽签
7)黑科技编辑器|幸运抽签-封面式教程
或直接点击《SVG抽签特效大全 | 黑科技编辑器》进一步查看。
连续层层滑动
《月满情臻》案例是一种对「等分容器滑动」组件的巧妙叠加应用,给人以层层递进的浏览体验,并在最后衔接纵向滑动或点击伸长:
请查看《GQ实验室同款连续层层滑动+伸长SVG教程|E2编辑器教程》了解这类布局的具体操作方法。
任意动画接播放GIF伸长
如果品牌方『设计师』准备好了精美的 GIF 动画, 那么也可以如《这个中秋,太出◎了》直接将多个「GIF控制器-渐隐」与「任意动画接伸长」组合:
「任意动画接伸长」是一种极大解放想象力的 E2 编辑器 SVG 套件,一些业内经典的趣味作品包括如《点 开 即 玩 ← ↑ → ↓ 塞 尔 达 传 说》其实都基于此实现。
地图多点游走缩放
这是一款由@2H发明的原创 UGC 组件,《团圆夜 水更甜|粉丝问答&中秋福利》基于它将产品广告与中秋明月、水上花灯设计相结合:
这一组件的应用面十分广泛,在《我要开始发疯了!!!》中我们亦进行了官方演示,这里还建议广大会员学习以下 Ceep 老师录制的案例分析视频。
全屏飘落任意内容+错层滑动
想给画面全屏增加中秋氛围?《香香的中秋(放假倒计时9天)》采用了全屏飘落组件,给广告长图瞬间增添了浓郁的节日氛围:
除此以外,还可以点击阅读《SVG全屏特效大全,拿捏多样氛围感!》查阅更多精彩的 E2 编辑器全屏式 SVG 特效。
滑动
喜茶在近期的《流心奶黄波波冰,回来啦!》中,通过精美的开场动画引导用户关注强势回归的高呼声产品:
它的制作主要通过「点击-播放GIF-伸长」实现,内部结合了优雅的「预感应无限图片滑动」,非常适合展示品牌动画的高质量设计。
月饼组合-贺卡弹出
今日霍州的《转发分享!每一块都是祝福》是由复旦大学奇点新媒体研究中心设计制作的中秋主题创意 SVG 设计,作品指导老师计育韬基于「多热区弹出式按钮激活」进行了特殊的代码改造:
针对政务类专项 SVG 设计,不少机关单位目前就重大选题广泛与复旦大学奇点新媒体研究中心开展专项公益合作,如需联系方式可私信与平台管理员沟通。同时针对更多高校用户,学生组织可点击阅读《全部SVG模版免费用,E2编辑器高校机构/公益组织会员长期开放申请》了解免费获取 E2.COOL 黑科技 SVG 编辑器全部会员功能的具体办法。
月球科普交互
在《黑科技编辑器|月亮拼图游戏教程》中,我们介绍了一种基于「滑动解锁渐变-伸长」的拟拼图 SVG 交互,你可以滑动下方指定位置体验:
此外也可以参考《拼图互动SVG教程|E2编辑器教程》了解无伸长的互动模式。更多游戏化的黑科技排版效果请阅读《⇠⇡⇢⇣SVG小游戏大全⇠⇡⇢⇣》了解。
我们还推荐你通过同屏互动,基于「多热区互斥开关浮窗」实现月球表面的多点触控浮窗,由此能承载更大的科普信息量。而关于数据可视化 SVG 的作品案例,近期还有《中国预制菜行业|数据可视化报告(Deepseek/『豆包』生成)》值得一看,如需工程草稿可向原作者索要。
更多海量模板,平均不足 1 元!
E2.COOL 秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,斩获包括法国设计奖、美国缪斯创意设计奖等诸多国际赛事大奖,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,E2 将竭诚思考代码转化的可行性。
E2 平台官网
https://www.e2.cool/
会的比别人多一点