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

123457245

来历：知乎
自 2016 年 SVG 动画白名单技术文档由 JZCreative x 微信团队公布以来，基于 SVG、CSS 等的图文式 H5 履历了 7 年的成长，现在已经成为了一种比 H5 直达率更高，投放本钱更低，互动性更强的创意营销技术。本期评选胜出作品开辟者包括  JZ、GL、荒村、小杨、yutu、Wannasleep 等，也包括由 E2.COOL 黑科技编辑器天生的优异案例。品牌方触及部分天气观察组、Tiffany、GQ 尝试室、腾讯等一线账号。
1. 部分天气观察组

遍历中秋的各至公众号公布，生怕艺术性和交互性都无出其右的排版神作！该文以诗为画，并将月亮作为焦点线索，在分歧的远景与布景中穿越而行，令读者们啧啧称奇。其结构的搭建基于 E2.COOL 黑科技编辑器实现，得益于部分天气观察组的强大设想力，让「错层滑动」这一排版技法又到达了史无前例的行业高度。


2. Tiffany蒂芙尼

本作由 JZ Creative Studio 承载开辟，是一篇很是优异的时候轴故事图文设想。数字点击后向两侧徐徐展开，由黑白过渡到彩色的蒂芙尼奖杯建造故事映入视线，并可持续点击往返切换革新，动效相当细致。


3. robosen乐森机械人

本作收场，巴斯光年从尘封的记忆中闪亮退场，场景复刻、细节复原不但让巴斯光年活灵活现地展现在读者眼前，更是叫醒了读者童年时对巴斯光年的向往和酷爱。该公布由三千喵设想，JZ 开辟托付至乐森。


4.微信派

以宇宙摸索为主题布景，连系「星际穿越」主题曲的音频控制和持续的缩放 SVG 以及 GIF 的控制，营建了奥秘又精彩的图文收场殊效，使得普通的一图流感官大为提升。


5. GQ尝试室

简单的滑动可以做出什么奇思妙想吗？GQ 再次给到了我们答案……将多个超长的「等分容器滑动」堆叠在一路，高度慢慢递加并在底部对齐，就实现了风趣的自界说海报设想逻辑，此篇由开辟者小杨建造。


6. 谷粒多

yiwebsite 开辟的此作以一通家庭电话为引线，串联起解锁手机、聊天等故事线索，本篇作品中融合了音频控制器、密码解锁、无穷显现可封闭等多种交互形式，极具兴趣性。


7.CharlesKeith Official

本作是典型的交互式插画，在跳脱的色块中感受大自然的自在安闲，由归零心态工作室设想开辟，托付至小 CK。在此作品中应用的无穷弹窗、GIF 控制器、音频等组件，配合组合出多姿多彩的交互结果。


8.差评

精美的视觉设想搭配简单却贴切的交互，打造了这篇高级感满满的产物广告。整体展开的时候轴以 perspective 视差为排版焦点要素，漂泊特征进一步增强了历史内容的深邃感。本作由意符互动开辟。


9.腾讯

不异的创意可以持续玩三次吗？可以。腾讯公众号经过鬼畜的「长鹅」动画，已经第三年中秋利用这类音频触发同步 GIF 播放的 SVG 交互了，简单粗鲁但仍然能让人莞尔一笑。该交互殊效可以经过 E2.COOL 黑科技编辑器「GIF 控制器+音频播放」模拟。


10. 朴直字库

本作是基于 E2.COOL 黑科技编辑器（https://www.e2.cool/）视差套件构成的长篇差速活动结果，得益于超高品格的设想，赛博天下的穿越感劈面而来，结果实在蔚为大观。





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