这是3D图文吗！？立体感超强的视差上滑排版教程来啦
打开图文，向上滑动时感觉像是进入了3D空间。
不少小伙伴都觉得这个排版效果很有意思，上滑试试：
*素材来自广和通Fibocom
组件：立体视差滑动-上滑
编号：11346（组件）
组件：遮罩
编号：10829（组件）
单纯的立体视差上滑排版，大家使用iPaiban Pro 编辑器中的「立体视差滑动-上滑」组件（编号：11346）即可实现。
上方效果的巧妙之处，就在于给立体视差上滑覆盖了一层遮罩，使得原本在背景上方滑动的图片好像从底面跑出来的，立体空间感马上就增强了。
▲遮罩图设计
不加遮罩（左）和加遮罩（右）的效果对比：
如果上滑的内容大家不想局限于纯图片，则可以使用「立体视差滑动 - 上滑组合」（编号：11353），使用它可以在上滑的内容中嵌套各种各样的交互效果。
比如嵌套自动轮播：
*素材来自中电光谷《中部崛起正当时，来感受园区的脉动》
组合：立体视差滑动-上滑组合
编号：11353（组合）
组件：双层banner-前景轮播，背景渐现
编号：10865（组件）
下面以本文第1个效果为例，一起看下制作教程吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：立体视差滑动-上滑
编号：11346（组件）
组件：遮罩
编号：10829（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「滑动」分类中找到「立体视差滑动-上滑」组件，或者直接搜索组件编号11346，点击选择。
第2步：上传图片素材
点击右侧「换图」按钮上传单张背景图，点击右侧「+」按钮按顺序批量上传滑动图。滑动图的图片宽度与背景图保持一致。
第3步：调整效果参数
设置「图片方向」为左右交替，「初始高度增量」保持默认值0。
第4步：设置「遮罩」组件并打开「全局宽度」
①点击编辑器左侧「组件」按钮，在「特殊」分类中找到「遮罩」组件，或者直接搜索组件编号10829，点击选择。
②点击右侧「换图」按钮，上传遮罩图。遮罩图与立体视差组件的背景图尺寸一致。
③打开「全局宽度」，统一立体视差和遮罩图的宽度。
第5步：导入公众号后台
点击页面最右侧「预览草稿」可随时预览效果，尽量使用手机扫码预览。
调整效果满意后点击「同步至微信后台」就同步到自己的公众号就可以了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）