宝藏模版
往期推荐(点击阅读):
趣味效果|高大上|可爱风|年终总结|循环特效|情人节(一)|情人节(二)|妇女节|儿童节|儿童节(二)|618|父亲节|丝滑动画|端午节|滑动妙用|图片轮播|又红又专|中秋节(一)|双十一|世界杯|圣诞节|新年|兔年春节|元宵节|愚人节|杂志范儿|520/521|五一旅游|母亲节|多巴胺|微博|夏日氛围|大唐国风|反诈宣传|七夕节|CityWalk|开学季|揭露丑恶真相|运动会|中秋节(二)|十一|万圣节|冬季氛围|新闻宣传
各位 E2.COOL 的会员,编辑器内 1200+ 的 SVG 组件你们都用过吗?龙年将至,不少企业品牌选择在春节前进行盘点回顾,不妨借助 SVG 的交互力量让信息的梳理和传达更高效而美观。
伸长套伸长
伸长动画是 SVG 黑科技排版的常见效果,而伸长套伸长则是进一步对海量信息的分类布局优化。毕竟年终总结往往包含多个方面和层次,所以在案例《 2023 小 编 年 终 总 结.pdf》中,我们将「伸长套伸长」与多个「无限往返伸缩器」进行组合:
那么如何进行这样的编辑器组合操作?素材设计又有怎样的基本要求?Ceep 老师特地为大家录制了本期排版的教学分解。
视差相册
有精彩的年度镜头值得向用户呈现?那么相信你一定会喜欢「视差相册」SVG 组件的滑动效果!使用前请务必仔细阅读教程《黑科技编辑器 | 视差相册(纵向8图)教程》。
️照片打印(依次进场)
看似基础的互动形式,通过巧妙的视觉设计组合或许就能形成别样的交互创意。比如将「依次进场」与「浮层」结合,你就凭空制作出了一台连续打印机,点击下方画面体验:
它的实际布局形式和组装方法请参考:
模拟朋友圈(点击-切换图片伸长 等)
如果推送包含多组图文材料,同时你希望提升互动感和趣味性,那可以考虑通过微信朋友圈的效果,结合点赞等经典交互操作让内容主体栩栩如生:
当然,你还可以利用「视频号跳转美化」等组件模拟朋友圈内的视频点击跳转,或通过「热区型弹出式海报」等组件模拟朋友圈内的照片放大查看……期待你通过编辑器组件实现更多奇思妙想!
汉堡夹层滑动(错层滑动)
错层滑动作为通用性最强的 CSS 滑动式创意设计,长期活跃于各类图文主题中。譬如字节跳动的定制案例(by Vicky Ching)《字节跳动2023年度盘点已生成》就结合了错层与吸附特性,形成了巧妙的橱窗变化效果:
在这份黑科技排版作品中,最值得一提的是夹层镂空(负空间)设计,正是它存在结合前后两个图层的元素设计才形成了如此的巧妙视效果。以下是它的汉堡夹层关系示意图和错层滑动的 E2.COOL 黑科技 SVG 编辑器操作教学,注意在操作时应选择「纵向吸附容器滑动」作为滑动框架:
上色滑动(顶层滑动)
同样是镂空(负空间)设计,特斯拉公众号的《2013-2023:这十年,不简单》则通过上半部分纯色填充的方法,实现了表面文案不断上色的滑动体验,使得似传统的图文排版瞬间有了新意:
这里同样提供其对应的图层关系示意图:
更多海量模板,平均不足 1 元!
E2.COOL 秉持着让行业“人均 SVG”的生态理念,由多位黑科技排版设计的头部资深开发者共同打造,帮助更多品牌以可视化形式完成互动式图文创作。如有任何特效灵感和建议,也欢迎通过客服向我们提出,E2 将竭诚思考代码转化的可行性。
E2 平台官网
会的比别人多一点