相册式的滑动效果总是很受欢迎。
之前给大家介绍过3种,点击图片跳转教程:
这次再详细给大家介绍一种常问的,日默瓦品牌的视频号带动小程序滑动的效果。
左滑感受一下:
左滑视频号大图,下面的小程序小图跟随滑动。相当于用视频号的视频展示产品,下面小程序提供购买链接,很是实用。
这个效果看着像一个新效果,但我们简单看一下图片素材,便能洞察该排版的巧妙之处。
这是跟随滑动的小程序图片的切图,其实就是把滑动内容平均分成了两份,每份图片上插入两个小程序链接:
那么效果用i排版SVG编辑器如何实现就很清楚了:
一个长屏左滑组合,每屏上下分别嵌套一个视频号图片组件和多触发区的小程序图片组件就完事儿。
下面一起看下具体的排版流程吧。
详细教程:
工具:iPaiban Pro 黑科技编辑器,网址:SVG.iPaiban.com
组合:长屏左滑组合
编号:10867(组合)
组件:视频号-图片
编号:10228(组件)
组件:小程序-图片(设置多个小程序)
编号:11135(组件)
组件:遮罩
编号:10829(组件)
第1步:选择组合
登录 iPaiban Pro 编辑器后,点击编辑器右侧「组合」按钮,在「滑动组合」分类中找到「长屏左滑」组合,或者直接在组合中搜索编号10867,点击选择。
第2步:进入组合编辑模式
点击「编辑组合」,进入组合编辑模式。
在组合编辑模式中,默认放置了两屏滑动,每一屏滑动点击「增加·槽」可增加一个组件位。右侧根据需要还可选择上传背景图。
第3步:拖拽组件到组件位中
示例效果为两屏滑动,每屏滑动使用了跳转视频号和跳转小程序两个效果。
我们点击两次「增加·槽」设置两个组件位。
然后在左侧组件中找到对应组件「视频号-图片」(编号:10228)和「小程序-图片(设置多个小程序)」(编号:11135),按顺序分别拖拽到组件位中。
另一屏滑动也是同样的操作,两屏对应组件的图片尺寸需保持一致。
第4步:设置组件内容
放好组件后,分别上传相应的素材和设置参数即可。
点击页面空白处,在右侧上传一张带有滑动提示的背景图,尺寸为一屏滑动图片的尺寸之和。
第5步:设置滑动前景图片
点击左上角红色「保存并退出」按钮,退出组合编辑模式。
接着在左侧组件中找到「遮罩」组件,点击选择,然后上传一张带有视频号标识的滑动前景图,尺寸为一屏滑动图片的尺寸之和。
第6步:导入公众号后台
点击最右侧「预览草稿」可随时扫码预览效果,效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。注意视频号、小程序类等需导入公众号后预览完整效果。
使用同步功能可以不用频繁在编辑器和微信后台切换,同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。























