“FENDI、Max Mara这些时尚大牌都爱用的相册式滑动，要怎么做?”
推文多图排版，简单的左右滑动效果真是用得够够了？
今天给大家介绍一种相册式滑动效果，简简单单，即可轻松实现高级感满满的图片展示效果。
我们先看效果：
*素材来自Weekend Max Mara《里斯本日记》
组件：夹层滑动-上滑(三层滑动中间上滑,支持多张图,自动对齐)
编号：12103（组件）
上下滑动大图，左侧的缩略小图也会跟着变化，仿佛打开了手机相册，流畅丝滑地切换着不同照片。
这种交互效果在于巧妙地运用了三层布局：背景图、前景图和中间滑动图。背景图和前景图不变，中间图层上下滑动。
背景层（左）和前景层（右）如下：
在背景图和前景图固定不变的情况下，中间图层在作图时包含一些小巧思：
下图蓝色框选区域为透明，展示对应的缩略小图。红色区域为半透明，遮盖住其他缩略小图。这样在上下滑动的时候，形成一个视觉变化的效果。
该效果使用 iPaiban Pro 黑科技编辑器里的的「夹层滑动-上滑」组件（编号：12103）即可实现。非常适合品牌进行产品展示。
如果想要全部素材，大家在谷歌浏览器打开这篇图文，然后使用 iPaiban Pro 小助手插件可一键下载图文中的全部图片。详情戳：《iPaiban Pro小助手安装和使用教程》
我们再来看FENDI的一个案例，滑动图支持点击跳转小程序：
*素材来自FENDI《FENDI新年心愿》
组合：上滑组合(自动对齐)
编号：11382（组合）
组件：小程序-图片(无角标)
编号：10015（组件）
因为加入了小程序，这个效果则需要「上滑组合(自动对齐)」组合（编号：11382）来制作。
下面以FENDI的案例为例，一起来看看这个效果是如何制作吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组合：上滑组合(自动对齐）
编号：11382（组合）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组合」按钮，在「滑动组合」分类中找到「上滑组合(自动对齐）」组合，或者直接在搜索框中搜索组合编号11382，点击选择。
第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，左侧为「滑动布局」设置区域，右侧根据需要还可选择上传遮罩图（即前景图）和背景图。
第3步：上传遮罩图或背景图
遮罩图和背景图根据需要可传也可不传。如需要上传遮罩图和背景图，点击「换图」按钮分别上传即可。这里的效果我们需要上传：
注意滑动容器宽高以背景为准，如果不传，默认为343*609。
第4步：设置滑动内容
「滑动内容」支持嵌套各种交互效果组件，需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：
FENDI这篇主要用到了「小程序-图片(无角标)」（编号：10015）。
第5步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」逐步退出组合编辑模式回到编辑器主页面。
继续点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）