三层穿透式上滑，真的是一个超级经典又实用的效果。
大家如果注意我们每次整理的节日或热点的案例合集，基本上每期都有一篇三层穿透式上滑的优秀案例。
我们常见的案例是这样的，上滑试试：
在这些常见案例中，滑动过程中元素始终坚守在一个位置。
今天要给大家介绍的是星巴克的一个案例，再上滑试试，注意中间层草莓元素的位置变化：
可以看出，向上滑动过程中草莓一会儿在中间，一会儿跑到右边，一会儿又窜到左边，就像捉迷藏，给人感觉很奇妙。
类似的案例还有：时间门外
其实还是那个三层上滑，只不过星巴克在图片设计上有所巧思。
一是中间层图片的草莓元素不再是单个，设计了多个：
二是在前景图片上的不同位置进行镂空设计：
如此一来在滑动过程中就有了一种穿透感，主体元素的位置变化也能玩出更多的花样。
做好设计，下面一起看下排版教程吧。
详细教程：
工具：iPaiban Pro黑科技编辑器，网址：SVG.iPaiban.com
组合：三层上滑组合
编号：11761（组合）
第1步：选择组合
登录 iPaiban Pro 黑科技编辑器后，点击编辑器左侧「组合」按钮，在「滑动组合」分类中找到「三层上滑」组合，或者直接搜索组合编号11761，点击选择。
第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，分为「中间图和背景图」与「前景内容」两块设置区域。
第3步：上传「中间图和背景图」图片
中间层图片应为镂空式，可以露出背景层图片。整个滑动显示画面大小由中间层图片尺寸决定。
第4步：设置前景层内容
需要什么效果就在左侧「组件」分类中找到相应的组件拖动到组件位中，然后上传需要的素材即可。
添加组件位-拖动组件到组件位中-上传图片，每需要一个样式就按照这3步操作：
第5步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
点击主页面最右侧「预览草稿」可预览效果，效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
