“自动对齐的三层上滑，滑动中怎么加入其他效果啊？”
每向上滑动一下，正好切换一屏，滑动过程中有固定的元素时隐时现。
这是中国民生银行最近用到的一个排版效果，也是比较容易出创意一个效果。这里直接放过来体验一下：
*素材来自中国民生银行《1分钟硬控养老citywalk，开启幸福未来》
组合：三层上滑组合(自动对齐)
编号：11756（组合）
滑动共分为3层，中间层不动，背景层和前景层一起一屏一屏地滑动。很多人想起了之前介绍的字节跳动的三层上滑效果（教程）：
*素材来自字节跳动《字节跳动2023年度盘点已生成》
组件：三层滑动-上滑(多张,自动对齐)
编号：11754（组件）
可以看出这种排版非常适合用作滑动组词、组句、拼图、变装等创意，不同的是这次的滑动的内容不再是单纯的图片，还加入了另外的一些SVG交互，使得体验更加丰富。
像前面中国民生银行的是加入了超链接图片，下面迈克高仕的案例则加入了左滑、小程序图片、序列帧动效等效果：
*素材来自MICHAEL KORS迈克高仕《她的闪耀时刻》
组合：三层上滑组合(自动对齐)
编号：11756（组合）
如果你也想在每屏滑动的内容中加入更丰富的交互，那自动对齐的三层上滑组件已经不能满足你，而是需要使用自动对齐的三层上滑组合。
下面以中国民生银行的效果为例，一起看下如果使用吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组合：三层上滑组合(自动对齐)
编号：11756（组合）
第1步：选择组合
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组合」按钮，在「滑动组合」分类中找到「三层上滑组合(自动对齐)」组合，或者在「组合」中直接搜索编号11756，点击选择。
第2步：进入组合编辑模式
点击「编辑组合」，进入组合编辑模式。
在组合编辑模式中，分为「中间图和背景图」、「前景内容」两块设置区域。「中间图和背景图」区域上传中间层和背景层图片，「前景内容」区域设置前景层内容，前景层内容可嵌套组件。
第3步：上传中间层和背景层图片
点击「中间图和背景图」区域，在右侧继续点击「换图」按钮上传1张中间层图片，点击「+」号批量上传多张背景层图片。
中间层图片应为镂空式，可以露出背景层图片。背景层图片需和中间层图片尺寸相同，背景层图片数量决定了滑动屏数。
第4步：设置前景层内容
「前景内容」区域中设置的是前景层，前景层不局限于单纯的无缝图，还可以嵌套使用各种交互效果。
①滑动布局中的滑动位数量需与背景层图片数量相同，每一个组件位对应一张背景层图片，点击「添加组件位」即增加一个组件位。
如果预览时有下面提示就说明滑动位数量和背景层图片数量不一致，需增加减少组件位，或增加减少背景图。
②组件位中可嵌套各种效果组件。如图拖动「全能无缝图」组件到组件位中：
拖动组件进来后按需上传图片，剩余滑动位按照同样流程设置即可。每个组件位的图片尺寸应与背景层图片尺寸保持一致。
第5步：导入公众号后台
内容编辑完毕后，点击左上角「保存并退出」退出组合编辑模式回到编辑器主页面。
继续点击最右侧「预览草稿」，效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）