“盒马这种镜头推进式弹窗，怎么做啊？”
今天万圣节，今天我们用一个排版先感受下节日氛围。
来自Continental德国马牌轮胎的一篇万圣节图文，点击浮动的按钮体验一下：
*素材来自Continental德国马牌轮胎《德国马牌轮胎万圣节主题乐园上线！你能通关吗？》
组件：点击-镜头推进+聚焦放大式弹窗
编号：11913（组件）
在背景图上点击浮动的按钮，图片像被镜头拍摄一样推进聚焦变化，并弹出弹窗，点击弹窗的关闭按钮返回原样，可继续循环点击。
这种效果最常用于地图上有多个地标的排版创意，类似的还有盒马这篇：
*素材来自盒马《胃，新疆去不去撒》
组件：点击-镜头推进+聚焦放大式弹窗
编号：11913（组件）
最近时不时有小伙伴来问咨询这个效果，大家使用 iPaiban Pro 黑科技编辑器的「点击-镜头推进+聚焦放大式弹窗」组件（编号：11913）即可制作。
iPaiban Pro 黑科技编辑器还有一个「点击-镜头推进+聚焦放大式弹窗+展开」组合（编号：11917），可以实现在弹窗后面接展开的效果，一起体验下（点击「查看详情」可展开）：
*素材来自小黄人科技《排版好难？00后：看我的！》
组合：点击-镜头推进+聚焦放大式弹窗+展开
编号：11917（组合）
今天咱们就以第1个Continental德国马牌轮胎的万圣节排版为例，来看下如何实现吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：点击-镜头推进+聚焦放大式弹窗
编号：11913（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「弹窗」分类中找到「点击-镜头推进+聚焦放大式弹窗」组件，或者直接在搜索框中搜索组件编号11913，点击选择。
第2步：上传图片素材
删除示例图片后，依次点击「换图」和「+」号上传图片。所有图片尺寸保持一致。
所需图片素材包括四部分，分别为真实背景图、触发区定位图+弹窗关闭遮罩、点击提示图片、弹窗图片。本文案例中的素材上传效果如下：
第3步：设置动画参数
拖拽滑轨设置动画参数，一般保持默认即可。
第4步：设置触发区域
双击编辑区的图片调出「触发区域」设置窗口，分别拖拽色块到指定位置设置每个弹窗的触发区域。
点击「下一张」设置弹窗的关闭触发区域。
第5步：导入公众号后台
该效果在编辑器无法预览，设置完毕后点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）