打分、划重点、字幕滚动……这种巧妙的模拟式排版怎么做的？
要是咱们希望制作出的图文不复杂但又有意思，不妨转换一下思路，把生活中常见的一些操作搬进给图文里。
但想要在图文中通过排版模拟日常生活中习以为常的效果，会不会很难哇？
今天给大家举3个有趣好玩的小例子就知道了，分别为：打分、划重点、字幕滚动
3个案例分别来自用我要WhatYouNeed、戴尔、我是FARMER BOB 3个公众号。
下面一起简单拆解一下。
一
模拟评分
*素材来自我要WhatYouNeed《好人微瑕，我们都做过的26件坏事。》
将前景中的星星区域做成镂空的，背景中设计填充星星的颜色，这样「背景右滑」就可以让用户在微信文章中为不同的行为打分。
素材如下：
该效果可使用 iPaiban Pro 黑科技编辑器中的「双层滑动-背景右滑」组件（编号：10140）制作。
前景和背景图片上传如下：
想要实现同款效果可以在编辑器（SVG.iPaiban.com）搜索使用：
组件：双层滑动-背景右滑
编号：10140（组件）
二
模拟划重点
*素材来自戴尔《Buff叠满，戴尔官网福利真的强！》
换个思路，还是双层图片，这次是背景不动，前景滑动。
在前景的重要文字处做镂空效果，在背景图的相应设计彩色的颜色条，这样在滑动过程中前景图镂空处就有了色彩的变化。
素材如下：
该效果使用 iPaiban Pro 黑科技编辑器中的「双层滑动-前景左滑」组件（编号：10018）即可制作。
选择组件后，在页面右侧依次点击「换图」和「+」号上传准备好的图片素材。滑动图尺寸和底图保持一致，本文案例中的素材上传效果如下：
想要实现同款效果可以在编辑器（SVG.iPaiban.com）搜索使用：
组件：双层滑动-前景左滑
编号：10018（组件）
三
模拟电影结尾字幕滚动
*素材来自我是FARMER BOB《新品｜以摇滚之名，与BOB一起高唱浪漫的诗》
自动向上滚动播放不同的名字。简单的效果赋予了推文如同电影般的仪式感。
这个效果由3层图片组成：背景层、中间层和前景层。
前景层的滚动图是多张图拼接而成的，需要使用 iPaiban Pro 黑科技编辑器中的「自动-向上滚动条」组件（编号：10891），支持设置滚动时间。
固定不动的背景和前景图，分别使用「零高图片」组件（编号：10224）和「遮罩」组件（编号：10829）进行配置。
3个组件的放置顺序如下，然后分别上传准备好的图片素材即可。每层图片尺寸都保持一致。
想要实现同款效果可以在编辑器（SVG.iPaiban.com）搜索使用：
组件：自动-向上滚动条
编号：10891（组件）
组件：零高图片 | 万能背景图
编号：10224（组件）
组件：遮罩
编号：10829（组件）
制作SVG交互图文认准 iPaiban Pro 黑科技编辑器，网址：SVG.iPaiban.com，复制网址在 PC 端 Chrome（谷歌）浏览器打开，即可注册，编辑器所有组件/组合现已全部支持免费试用了。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本文禁止转载，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）