这些让人想要夸夸的三层切换效果案例，都是怎么实现的？

和三层切换交互有关的图文，总是会出现一些好案例，进而带火对应的交互效果。

前两年流行起来的贯穿全文的穿透式三层上滑（示例及教程），就是一个典型的例子。

最近一些让人忍不住想要夸夸的案例，也是三层切换的，对应的交互效果也深受欢迎了起来。

第1种是自动对齐的三层上滑，之前在教程《被夸「好有创意」，字节跳动这篇排版是怎么做的？》介绍过，最近时尚芭莎也使用了这个交互，配合镂空式的图片设计，呈现的效果同样优秀：

*素材来自时尚芭莎

组件：三层滑动-上滑(多张,自动对齐）

编号：11754（组件）

教程：《被夸「好有创意」，字节跳动这篇排版是怎么做的？》

第2种是点击三层移动切换，之前也在《一键换场景！点击三层移动切换教程来了》一文中详细介绍了，我们再通过人民网的一个案例感受下：

*素材来自人民网《你以为的我，真的是我？》

组件：点击-三层移动切换

编号：11882（组件）

教程：《一键换场景！点击三层移动切换教程来了》

今天再给大家介绍一种——自动对齐的三层左滑，同样是中间层不动，前景和背景层一起切换，非常适合换装、换场景等相关的排版创意。

看下奥迪的应用：

*素材来自奥迪《左滑 心动五次》

组件：三层滑动-左滑(自动对齐)

编号：10739（组件）

前两个案例在交互下面都有对应的教程，下面一起看看案例3奥迪的自动对齐的三层左滑是如何制作的吧。

详细教程：

工具：iPaiban Pro 黑科技编辑器

组件：三层滑动-左滑(自动对齐)

编号：10739（组件）

第1步：选择组件

登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「滑动」-「三层」分类中找到「三层滑动-左滑(自动对齐)」组件，或者直接在搜索框中搜索组件编号10739，点击选择。

第2步：上传图片

点击右侧「换图」上传中间的图片，若图片上传错误，还可点击换图进行调整。

点击「＋」号分别上传前景和背景图，注意每张图片的宽高一致且前景图和背景图的数量一样。

第3步：导入公众号后台

点击最右侧「预览草稿」预览效果，根据效果可随时进行调整。

效果满意后点击「同步至微信后台」等待同步成功，然后扫码预览效果即可。