iSVG

这是一篇对代码编组有较高要求的测试题型 SVG 互动排版，需要实现点击时反馈当前选项正误并同步勾选正确选项，此外要并行出现题目解析并支持超链接转跳，因而即便如鼈臑这样的大神，在开发工作上也耗费了大量时间。测试题型 SVG 互动是近期相对较少出现的黑科技排版模式，品牌主不妨思考它的应用可行性。

由 JZ 提出的全新遮罩式滑动，可以在确保图片完整的情况下形成镂空效果，而无需上层挖空后再通过穿透触发。其关键在于<-webkit-mask-image>的技术应用，由此以往的各类穿透式滑动（如车窗外风景变化）制作更为便捷，有兴趣的运营人不妨尝试。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「顶层滑动」实现。

CSS 的类入榜花式排版，本期一所高校的反向滑动与 C4D 特效动态混合大作值得大家一看，足以秒杀绝大多数品牌号的排版设计。本文回顾了该校全年的推送数据，并制作了一条基于 C4D 合成的三维动画。对于滑动区，视频的部分片段被采集为 GIF 作为滑块盒子的背景图参数，半透明滑块的内容与动态背景的融合得当，主次清晰，并没有因为元素繁多而凌乱，因而被选入本期榜单。

应用了盲盒设计的品牌还有伊利。尽管伊利的 Agency 众多，但近期都频繁向我们几位开发者定制交互式图文，本作盲盒的交互流程更为丰富，前期串联了一组轨迹+透明度的符合动画组，后期串联了一组伪正反翻转动画。

抽签式 SVG 交互排版还能如何进化？荒村在迪士尼公众号套用了当下时兴的盲盒概念，让用户在图文消息中玩得尽兴。

本文我们在制作过程中融合了包括音频播放器（新版）改造、GIF 控制器、渐进式序列等 CSS 与 SVG 技术，使得全文的互动感极佳。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「GIF控制器」、「点击切换」等实现。

爱马仕本作通过简单的透明度动画与动静结合的图像设计，增加阅读趣味性的同时，保持了应有的格调。目前该效果可以在 SVG 黑科技编辑器（https://www.e2.cool/）中通过「点击渐现」实现。

康师傅的这款新品速食泡面据悉包含了 8 种海鲜，如何能让用户在阅读过程中充分记住这一产品特性？这一次康师傅选择了最顶级的互动式 SVG 图文排版来打动受众。本作是比较少见的像素风插画设计，上一次圈内的同类型作品大约要追溯到二十世纪福克斯的《8像素闯关小游戏》。不过要注意的是，本作像素设计源自 AI 网格生成，产生了庞大的路径代码。尽管 JZ 在开发过程中已经对大量路径进行了简化合并，但依然对旧版 iPhone 和低版本安卓有极高的负载压力，导致部分机型卡顿明显。所以建议，对于要采用像素风设计的黑科技互动长卷排版，颗粒度不应过细。