边滑边上色，全国人大的这个排版怎么做？
读者在阅读文章的过程中，几乎每时每刻都能感受到参与其中。
这样的排版除了贯穿全文的SVG轨迹移动，还有一直以来非常受欢迎的全文上滑效果。
之前给大家讲过三层穿透式上滑（教程），今天再来给大家介绍一个边滑边上色效果，全国人大都在用。
感受一下：
*素材来自全国人大《交互漫画｜全过程人民民主的新时代答卷》
组件：双层滑动-前景上滑(支持多张)
编号：10203（组件）
在交互上，它只需两层图片即可，采用的是双层前景上滑，背景层静止不动；它的重点在于设计，一是背景层的颜色设计，二是前景层每张图片的镂空设计。
背景层颜色为分段式，上面部分为想要上色的颜色，下面部分为前景层的主色；前景层需要上色的位置制作为镂空的：
再来看一个效果更明显的案例，来自嘉里合集：
*素材来自嘉里合集 The Lightbox《新品丨重磅升级！level+++++++1！》
组件：双层滑动-前景上滑(支持多张)
编号：10203（组件）
它的背景层和前景层结构如下：
如果大家还不明白，可以在 「品牌时光机」公众号后台对话框回复关键词「上色」获取以上两个案例的全部素材仔细查看。
下面以第2个嘉里合集的效果为例，一起看下如何排版吧。
详细教程：
工具：iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com
组件：双层滑动-前景上滑(支持多张)
编号：10203（组件）
第1步：选择组件
登录 iPaiban Pro 编辑器后，点击编辑器左侧「组件」按钮，在「滑动」-「双层前景」分类中找到「双层滑动-前景上滑(支持多张)」组件，或者直接搜索组件编号10203，点击选择。
第2步：上传图片素材
点击右侧「换图」按钮上传一张背景图。背景图尺寸与第一张前景图尺寸或比例一致。
点击右侧「+」号批量上传前景图。滑动范围由第一张前景图决定。所有图片的宽度保持一致。
前景图顺序上传错误可直接拖动调整。
第3步：导入公众号后台
点击最右侧「预览草稿」随时预览效果，效果满意后接着点击「同步至微信后台」就可以了。
使用同步功能无需频繁在编辑器和微信后台切换，同步成功后可以立即扫描二维码查看。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）