昨天秋分,也是中国农民丰收节,国家税务总局的一个丰收节排版颇受大家欢迎。
打开全文,除了开屏内容,后面所有画面都是一种模糊的状态。根据提示点击收割机,收割机向下移动,同时推动擦除模糊画面,显现真正的内容,体验非常有趣。
*GIF录自国家税务总局中国农民丰收节:税惠助农 绘就秋收好“丰”景
组件:点击-向下擦除切换(多张图)
编号:11872(组件)
这个效果使用i排版SVG编辑器的「点击-向下擦除切换(多张图)」组件(编号:11872)即可实现。
除了用作擦除模糊画面的创意,还可以像戴森这样,用作变换不同颜色的画面,视觉效果也是绝佳。
*GIF录自戴森上新 3 连,刷新清洁体验
组件:点击-向下擦除切换(多张图)
编号:11872(组件)
另外还可以用作从黑白到彩色、由从前到现在等画面变化创意,可玩性很高。最重要的是跟随向下擦除的图片,面对不同主题可使用不同元素,使得文章与主题紧密结合。
下面以国税局丰收节的排版为例,一起看一下详细教程吧。
详细教程:
工具:i排版SVG编辑器,网址:SVG.iPaiban.com
组件:点击-向下擦除切换(多张图)
编号:11872(组件)
第1步:选择组件
登录i排版SVG编辑器后,点击编辑器左侧「组件」按钮,在「点击」-「擦除切换」分类中找到「点击-向下擦除切换(多张图)」组件,或者直接搜索组件编号11872,点击选择。
第2步:上传图片素材
图片素材共分为三大部分:切换前图片、切换后图片以及首部移动图。
其中切换前图片分两部分上传,为了设置开始的点击触发区域,切换前的首图需单独上传;全部的切换前图片(包含切换前首图)和全部的切换后图片总长度应保持一致;首部移动图对应本文案例中的推土机;所有图片宽度需保持一致。
上传示例如下:
这里的首部移动图与切换前首图尺寸一致。
第3步:设置动画效果
分别调整首部隐藏移动图向下露出的高度百分比和点击后向下擦除动画的时间。这里设置为100%,全部露出。擦除模式保持默认擦除优先。
第4步:调整触发区域
双击编辑区切换前首图,拖拉红色色块确定点击触发的区域。
点击最右侧「预览草稿」可随时预览效果。
第5步:导入公众号后台
使用同步功能不用频繁在编辑器和微信后台切换,同步成功后可以立即扫描二维码预览在公众号的效果。
如需局部导入可参考《iPaiban Pro小助手安装和使用教程》中导入功能的「导入代码」部分。
























