想要自动轮播展示多张图片,效果有太多太多了。
之前跟大家整理过一些,查看戳:
单层、双层、差速、回溯……一文告诉你8种自动轮播banner怎么做
今天要给大家推荐的是霸王茶姬的一个同款自动轮播效果——自动视差轮播:
*素材来自霸王茶姬出去走走,解锁「走走系列」茶特调买三赠一!
组件:自动-视差轮播(向左)
编号:12163(组件)
一屏之间的图片追着走,很显高级感,简简单单的一个排版就能有效提升内容的品质感和品牌调性。
该效果使用i排版SVG编辑器的「自动-视差轮播(向左)」组件(编号:12163)即可实现。组件支持一屏轮播图片层数有两层或三层,前面霸王茶姬的为三层,这个是两层效果:
*素材来自百达翡丽爱,历历在目
组件:自动-视差轮播(向左)
编号:12163(组件)
下面以霸王茶姬的排版为例,一起看一下详细教程吧。
详细教程:
工具:i排版SVG编辑器,网址:SVG.iPaiban.com
组件:自动-视差轮播(向左)
编号:12163(组件)
第1步:选择组件
登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「自动」分类中找到「自动-视差轮播(向左)」组件,或者直接在搜索框中搜索组件编号12163,点击选择。
第2步:选择轮播图层数并上传图片素材
一屏轮播图层数默认支持上传「两层」,本文霸王茶姬的示例为三层,所以先选择轮播图层数「三层」。
图片上传支持三部分:前景图、背景图和自动轮播图。所有图片尺寸需保持一致。
其中前景图和背景图可不传,本文示例中包括前景图和背景图,点击「换图」按钮依次上传即可。
点击「+」号分别批量上传每一层的自动轮播图。如下所示:
第3步:调整动画参数
依次调整每张图片停留时间、每次轮播切换时间和轮播延迟时间。
第4步:导入公众号后台
点击最右侧「预览草稿」,效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
























