SVG交互排版案例集（2022年11月）

刘久田

来历：知乎
自 2016 年 SVG 动画白名单技术文档由 JZCreative x 微信团队公布以来，基于 SVG、CSS 等的图文式 H5 履历了 7 年的成长，现在已经成为了一种比 H5 直达率更高，投放本钱更低，互动性更强的创意营销技术。本期评选胜出作品开辟者包括 JZ、E2（高级定制）、荒村、小杨、三千喵、Zeper 等，也包括由 E2.COOL 黑科技编辑器天生的优异案例。品牌方触及 GE 中国、Apple、肯德基等一线账号。
1. GE中国

11 月，JZ Creative 为 GE 中国托付了进博会的系列公布。本作由纯代码归纳主 KV 设想，跟尾基于 E2.COOL 黑科技编辑器的视差排版组件。作品中的线稿图由艺术家手工勾画，搭配悬疑感的画面设想，打造了全球顶尖科技巨头 GE 中国的这篇进博会预热图文。


以时空传送为画面框架，将展会图集以黑洞吐息方式经过 SVG 代码不竭出现，极大提升了图文展现的丰富感，同时底部的消息稿可展开又可发出，有用将超长的内容篇幅详略适当停止交互展现，是产业品牌图文设想的典型作品。


2. 部分天气观察组

部分天气观察组再推「错层滑动」排版神作，奇妙的前后景设想甚至制造出了一种双夹层物体（自行车-汽车）的错觉，将剧情层层递进顺势引入华为问界汽车的广告内容。作品仍然基于 E2.COOL 黑科技编辑器实现，做到了技术与设想的有机平衡，1+1＞2 的优异表示。


3. GQ尝试室

典型的错层滑动设想，以牢固人像在前后景中穿插前行，以街区、步道、楼梯、门、电梯、镜子等作为形象的场景承载物，漫谈了消耗中的各种现实题目和心情变迁，最初顺势落到天猫虚拟 AR 逛街的广告当中解开上述懊恼，本作由交互尝试室建造开辟。


4.Apple

三层视差滑动可以若何创新？操纵挖孔后透出下层要素的方式，Apple 建造出了一种模拟高亮标志的滑动结果，视觉感受简单却富有冲击力。其中表层深度为 0，下层为负数，确保了概况的完全无缝跟尾。


5. 长图汽车站

精彩绝伦的高质感插画设想，配合基于 E2.COOL 黑科技编辑器视差排版套件构成的裸眼 3D 结果排版，打造了亦梦亦真的青年事月故事，结尾奇妙落点到抖音商城广告，将视觉交互和贸易转化自然跟尾，不失为自媒体内容设想的佳作典范。


6. Tatler的朋友们

将伸长反向嵌入滑动的特别 SVG 结构，而且缔造性地处理了伸长结构反向滑回的留白题目。作品由 E2.COOL 黑科技编辑器技术组高级定制完成。


7.科沃斯会员中心

科沃斯以机械报酬选手，经过 SVG 纯代码的轨迹动画（位移、缩放等）开辟，实现了多个画面的射门殊效，并切换显现布景 GIF 图，结果细致而风趣，此作出自荒村大佬之手。


8.天下古装之苑ELLE

持续放大结果的同时，叠加尺寸有大到小的「洞」结构，足见设想师的构想奇妙和开辟者三千喵的独具匠心，充实营建了联名产物的奥秘感，以令人沉迷的收场殊效揭开了 Coach x 大白兔的年度合作大片。


9.肯德基

两大 IP 之间静静话语音交互，用伪音频视频+ GIF 殊效构成了兴趣表示。作品由归零心态工作室的 Zeper 建造开辟，也加入了很多开辟者在细节处的巧思。


10. GQ尝试室

房间游走式 SVG 再现于 GQ 尝试室公众号，这类 Prezi 形式动画在公众号图文内的复刻最早出现在 Marshall 马歇尔公众号的《去串个门，听点音乐》，自始自终是手工开举事度极大的作品。





原文地址：https://zhuanlan.zhihu.com/p/594904550
免责声明：本帖内容由机械人自动收集于互联网，如加害了您的权益，请联系我们【E-Mail:cb@yoyodoc.com】 我们会实时删除侵权内容，给您带来未便，深感歉意！