春天到了，教你3种排版方式给单调的图文「来点颜色」瞧瞧！
你是否觉得那些一成不变的内容已经无法满足你对图文的期待和追求？
春天到了，万物复苏，是时候给你的图文也「加点颜色」，让它们「活」起来！
比如中原银行、奥迪和美的智慧家用SVG在图文中模拟「上色」，趣味横生！
今天给大家简单拆解3个「上色」案例，让我们一起用SVG交互图文，为公众号世界增添更多的色彩和活力吧！
一
上色海报
*素材来自中原银行《多彩生活，就要领“红”包享福“绿”！》
「中原银行」的这篇图文刚开始只给大家提供了线稿，通过点击上方的色块进行填色，非常巧妙的在图文中做出了「填色游戏」的效果。
上传背景图和3张切换图后，我们需要按序设置相应的触发区域。
注意这里的背景图和3张切换图需要同一尺寸。
想要实现同款效果可以搜索使用：
组件：点击-切换图片(多触发区)
编号：11514（组件）
教程：《点击，作画！》
二
灰度上色
*素材来自奥迪《在？给春天上个色！》
这样滑动前是灰色的，滑动过程中逐渐上色的图文，其实是用到了「灰度滤镜」，效果非常神奇，做起来却十分简单。只需要上传一张彩色的图片，这里参数一般默认为100%不变。想要实现同款效果可以搜索使用：
组件：灰度滤镜-左滑(上色)
编号：11199（组件）
三
擦除上色
*素材来自美的智慧家《美的春装季，让生活焕发新生》
「美的智慧家」图文打开后是黑白色的漫画，能够引起大家的好奇，下滑到最后点击向上擦除逐渐上色。这里的长图是多张图拼接而成的，需要使用「点击-向上擦除切换(多张图)」的组件，需留意所有图片宽度相同，切换前图片总高度等于切换后图片总高度。想要实现同款效果可以搜索使用：
组件：点击-向上擦除切换(多张图)
编号：11416（组件）
本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
转载请在文章开头和结尾显眼处标注：作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表，内容为作者独立观点，不代表数英立场。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
未经授权严禁转载，授权事宜请联系作者本人，侵权必究。
本内容为作者独立观点，不代表数英立场。
本文禁止转载，侵权必究。
本文禁止转载，侵权必究。
本文系数英原创，未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权，侵权必究。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）