这些让人想要夸夸的三层切换效果案例，都是怎么实现的？
和三层切换交互有关的图文，总是会出现一些好案例，进而带火对应的交互效果。
前两年流行起来的贯穿全文的穿透式三层上滑（示例及教程），就是一个典型的例子。
最近一些让人忍不住想要夸夸的案例，也是三层切换的，对应的交互效果也深受欢迎了起来。
第1种是自动对齐的三层上滑，之前在教程《被夸「好有创意」，字节跳动这篇排版是怎么做的？》介绍过，最近时尚芭莎也使用了这个交互，配合镂空式的图片设计，呈现的效果同样优秀：
*素材来自时尚芭莎《都市里的City Love，City不City》
组件：三层滑动-上滑(多张,自动对齐）
编号：11754（组件）
第2种是点击三层移动切换，之前也在《一键换场景！点击三层移动切换教程来了》一文中详细介绍了，我们再通过人民网的一个案例感受下：
*素材来自人民网《你以为的我，真的是我？》
组件：点击-三层移动切换
编号：11882（组件）
今天再给大家介绍一种——自动对齐的三层左滑，同样是中间层不动，前景和背景层一起切换，非常适合换装、换场景等相关的排版创意。
看下奥迪的应用：
*素材来自奥迪《左滑 心动五次》
组件：三层滑动-左滑(自动对齐)
编号：10739（组件）
前两个案例在交互下面都有对应的教程，下面一起看看案例3奥迪的自动对齐的三层左滑是如何制作的吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：三层滑动-左滑(自动对齐)
编号：10739（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器右侧「组件」按钮，在「滑动」-「三层」分类中找到「三层滑动-左滑(自动对齐)」组件，或者直接在搜索框中搜索组件编号10739，点击选择。
第2步：上传图片
点击右侧「换图」上传中间的图片，若图片上传错误，还可点击换图进行调整。
点击「＋」号分别上传前景和背景图，注意每张图片的宽高一致且前景图和背景图的数量一样。
第3步：导入公众号后台
点击最右侧「预览草稿」预览效果，根据效果可随时进行调整。
效果满意后点击「同步至微信后台」等待同步成功，然后扫码预览效果即可。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）