春天到了，教你3種排版方式給單調的圖文「來點顏色」瞧瞧！
你是否覺得那些一成不變的內容已經無法滿足你對圖文的期待和追求？
春天到了，萬物復蘇，是時候給你的圖文也「加點顏色」，讓它們「活」起來！
比如中原銀行、奧迪和美的智慧家用SVG在圖文中模擬「上色」，趣味橫生！
今天給大家簡單拆解3個「上色」案例，讓我們一起用SVG交互圖文，為公眾號世界增添更多的色彩和活力吧！
一
上色海報
*素材來自中原銀行《多彩生活，就要領“紅”包享福“綠”！》
「中原銀行」的這篇圖文剛開始只給大家提供了線稿，通過點擊上方的色塊進行填色，非常巧妙的在圖文中做出了「填色游戲」的效果。
上傳背景圖和3張切換圖后，我們需要按序設置相應的觸發區域。
注意這里的背景圖和3張切換圖需要同一尺寸。
想要實現同款效果可以搜索使用：
組件：點擊-切換圖片(多觸發區)
編號：11514（組件）
教程：《點擊，作畫！》
二
灰度上色
*素材來自奧迪《在？給春天上個色！》
這樣滑動前是灰色的，滑動過程中逐漸上色的圖文，其實是用到了「灰度濾鏡」，效果非常神奇，做起來卻十分簡單。只需要上傳一張彩色的圖片，這里參數一般默認為100%不變。想要實現同款效果可以搜索使用：
組件：灰度濾鏡-左滑(上色)
編號：11199（組件）
三
擦除上色
*素材來自美的智慧家《美的春裝季，讓生活煥發新生》
「美的智慧家」圖文打開后是黑白色的漫畫，能夠引起大家的好奇，下滑到最后點擊向上擦除逐漸上色。這里的長圖是多張圖拼接而成的，需要使用「點擊-向上擦除切換(多張圖)」的組件，需留意所有圖片寬度相同，切換前圖片總高度等于切換后圖片總高度。想要實現同款效果可以搜索使用：
組件：點擊-向上擦除切換(多張圖)
編號：11416（組件）
本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本內容為作者獨立觀點，不代表數英立場。
本文禁止轉載，侵權必究。
本文禁止轉載，侵權必究。
本文系數英原創，未經允許不得轉載。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）