“小红书的这种视差相册滑动，怎么做的？”
滑动大图，小图也会跟着动。
最近不少小伙伴对这种视差相册式的滑动很感兴趣啊，那今天就给大家讲讲，如何用 IPaiban Pro 黑科技编辑器快速实现这种效果。
照例先来体验一下。视差相册滑动最常见的滑动方式有两种，一种是自动对齐的左滑，一种是超顺滑的上滑。
视差相册左滑：
*素材来自UGG官方《LOVE IS LOVE》
组件：视差相册-左滑(自动对齐)点此免费领取
编号：11844（组件）
视差相册上滑：
*素材来自小红书《起猛了，看见外滩同时升起200个月亮》
组件：视差相册-上滑点此免费领取
编号：11851（组件）
对应效果使用的组件已经在效果下方标注了，有时如果配合「遮罩」组件给视差相册上方加一个前景图，在视觉体验上会更佳。
比如视差相册左滑加一个相框透明前景图，下方小图就给人感觉在相框内滑动：
*素材来自UGG官方《LOVE IS LOVE》
组件：视差相册-左滑(自动对齐)点此免费领取
编号：11844（组件）
组件：遮罩
编号：10829（组件）
视差相册上滑加一个上下渐变透明的前景图，滑入滑出的效果就更自然：
*素材来自小红书《起猛了，看见外滩同时升起200个月亮》
组件：视差相册-上滑点此免费领取
编号：11851（组件）
以加相框前景的左滑效果为例，一起看下具体如何制作吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：视差相册-左滑(自动对齐)
编号：11844（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「滑动」-「视差滑动」分类中找到「视差相册-左滑(自动对齐)」组件，或者直接搜索组件编号11844，点击选择。
第2步：上传图片素材
点击右侧「换图」按钮上传背景图，点击两个「+」号分别上传上方滑动图和下方滑动图。所有图片尺寸保持一致，上下方滑动图数量保持一致。
注意无论上方滑动图还是下方滑动图，滑动图的内容都需设计在图片左右居中位置。如下所示：
*左：上方滑动图 右：下方滑动图
第3步：选择图片跳转
该效果可以选择为滑动图添加超链接或小程序跳转。本文的演示案例没有跳转，保持默认「无」即可。
第4步：设置前景图
如果不需要为视差相册设置前景图，可忽略此步骤。如果需要，可通过「遮罩」组件来实现。
搜索组件编号10829找到「遮罩」组件，点击选择，然后上传准备好的前景图片，该图片将会自动覆盖在视差相册效果上方。注意图片尺寸和视差相册中的图片尺寸保持一致。
第5步：导入公众号后台
点击最右侧「预览草稿」可随时扫码预览效果，效果满意后点击「同步至微信后台」同步到自己的公众号就可以了。
使用同步功能可以不用频繁在编辑器和微信后台切换，同步成功后可以立即扫码预览二维码查看。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）