聚焦SVG排版技巧与创意应用的实用手册合集A collection of practical manuals focusing on SVG typesetting techniques and creative applications
组件教程“盒马这种镜头推进式弹窗,怎么做啊?”
“盒马这种镜头推进式弹窗,怎么做啊?”2024-10-30 09:00

 

 



 

                                                           




明天万圣节,今天我们用一个排版先感受下节日氛围。

来自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步:导入公众号后台

该效果在编辑器无法预览,设置完毕后点击同步至微信后台就可以了。


使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。



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

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



SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

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

 

                                                           
                                                           
                           


热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
聚焦SVG排版技巧与创意应用的实用手册合集
首页组件教程
“盒马这种镜头推进式弹窗,怎么做啊?”2024-10-30 09:00

 

 



 

                                                           




明天万圣节,今天我们用一个排版先感受下节日氛围。

来自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步:导入公众号后台

该效果在编辑器无法预览,设置完毕后点击同步至微信后台就可以了。


使用同步功能无需频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码查看。

如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。



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

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



SVG 黑科技交互排版👇🏻

 

                                               
                                               
                                               

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

 

                                                           
                                                           
                           


热门工具
iPaiban ProSVG黑科技编辑器
立即免费试用
i排版公众号图文编辑器
免费制作图文
MiSum AI聚合国内外先进AI大模型
注册送300积分
品牌时光机SVG交互图文案例库
限时免费搜索
推荐阅读
1
不愧是Apple!6种苹果味儿十足排版效果请收好!12025-06-16
2
不愧是Apple!6种苹果味儿十足排版效果请收好!22025-06-16
3
不愧是Apple!6种苹果味儿十足排版效果请收好!32025-06-16
4
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
5
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
6
不愧是Apple!6种苹果味儿十足排版效果请收好!2025-06-16
组件教程
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
组件教程
ID:11845 自动-轮播Banner(可弹出、可长按保存) ID: 11845
SVG案例
推荐指数4.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车科技互联网
人民日报
2025-06-17
推荐指数3.5
来了!新闻早班车体育运动
人民日报
2025-06-17
i排版_iPaiban_客服微信扫码加客服领会员
联系邮箱:i@playhudong.com
i排版_iPaiban_公众号i排版_iPaiban_知乎i排版_iPaiban_微博i排版_iPaiban_哔哩哔哩
京ICP备14043207号-2 京公网安备11010802023272号
小黄人科技@2025 | 服务协议