“盒马这种镜头推进式弹窗，怎么做啊？”

来自Continental德国马牌轮胎的一篇万圣节图文，点击浮动的按钮体验一下：

*素材来自Continental德国马牌轮胎《德国马牌轮胎万圣节主题乐园上线！你能通关吗？》

在背景图上点击浮动的按钮，图片像被镜头拍摄一样推进聚焦变化，并弹出弹窗，点击弹窗的关闭按钮返回原样，可继续循环点击。

这种效果最常用于地图上有多个地标的排版创意，类似的还有盒马这篇：

 

*素材来自盒马《胃，新疆去不去撒》

组件：点击-镜头推进+聚焦放大式弹窗

编号：11913（组件）

最近时不时有小伙伴来问咨询这个效果，大家使用 iPaiban Pro 黑科技编辑器的「点击-镜头推进+聚焦放大式弹窗」组件（编号：11913）即可制作。

 

*素材来自小黄人科技《排版好难？00后：看我的！》

今天咱们就以第1个Continental德国马牌轮胎的万圣节排版为例，来看下如何实现吧。

详细教程：

所需图片素材包括四部分，分别为真实背景图、触发区定位图+弹窗关闭遮罩、点击提示图片、弹窗图片。本文案例中的素材上传效果如下：

拖拽滑轨设置动画参数，一般保持默认即可。

制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。

新用户在「新手礼包」可领取3天企业标准版会员免费商用，以及22个常用必备组件的大礼包（1年）。随礼包附赠千元优惠券，每单最高立降500元。

● SVG 黑科技交互排版👇🏻

 

如需定制 SVG 黑科技排版，请点此查看定制流程和套餐，低至500元/篇。