这篇美拉德三层穿透上滑图文，怎么做啊？

原创赞收藏评论

举报 2023-09-26

扫描,分享朋友圈

每向上滑动一下，正好切换一屏，滑动过程中有固定的元素时隐时现。

这是上周在9月会员日用到的一个排版效果，也是最近小伙伴们问的比较多的一个效果。这里直接放过来再一起体验一下：

*素材来自i排版编辑器《点击开启美拉德反应(o°ω°o)》

组合：上滑组合(三层滑动,自动对齐)

编号：11756（组合）

滑动共分为3层，中间层不动，背景层和前景层一起滑动。很多人想起了之前介绍的局部气候调查组的三层上滑效果（教程）：

*素材来自局部气候调查组《月亮看见了》

组件：三层滑动-上滑(多张)

编号：10803（组件）

不同的是这次的效果是一屏一屏滑动，每次中间层元素可以出现在屏幕的固定位置，所以可以用作滑动组词、组句、拼图等创意。

更多创意玩法等待大家去发掘，今天我们来看看它是如何制作的吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com

组合：上滑组合(三层滑动,自动对齐)

编号：11756（组合）

第1步：选择组合

第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，分为展开前和滑动布局两块设置区域。展开前上传中间层和背景层图片，滑动布局中设置前景层内容。

第3步：上传中间层和背景层图片
点击「展开前」区域，在右侧继续点击「换图」按钮上传1张中间层图片，点击「+」号批量上传多张背景层图片。
中间层图片应为镂空式，可以露出背景层图片。背景层图片需和中间层图片尺寸相同，背景层图片数量决定了滑动屏数。

第4步：设置前景层内容
滑动布局中设置的是前景层，前景层不局限于单纯的无缝图，还可以嵌套使用各种交互效果。
①滑动布局中的滑动组数量需与背景层图片数量相同，每一个滑动组对应一张背景层图片，点击「添加组件位」即增加一个滑动组。

如果预览时有下面提示就说明滑动组数量和背景层图片数量不一致，需增加或减少滑动组。

②在滑动组中，点击「增加·槽」即添加了一个小组件位，此时我们就可以拖动左侧需要的组件到小组件位中，一个滑动组中可以添加多个小组件位。

拖动「全能无缝图」组件到小组件位中：

拖动组件进来后按需上传图片，剩余滑动组按照同样流程设置即可。
注意，因为每一个滑动组对应一张背景层图片，所以一个滑动组中无论使用多少组件，所有图片的高度应等于一张背景层图片高度。

第5步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
继续点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。

使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考：《iPaiban Pro小助手安装和使用教程》

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

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