好的SVG互動圖文,一定是互動和設計的巧妙結合。
有時候不知道圖片怎麼做的,你也就製作不出同款效果。
比如Apple《換 iPhone 12 的理由,一個個展開說。》這篇,點選下拉的效果是如何與切分的素材結合的?
比如寶馬中國《馬上有禮》這篇,開頭的雙層前景左滑效果,左滑圖片,你會看到一隻老虎駕駛著汽車向前疾馳,很是有趣,這個素材是怎麼做的?
·
再比如GQ實驗室《JDM又是什麼流行的縮寫梗啊?》這篇,使用了點選彈出圖片的效果,但首先吸引眼球的還是剛開啟時的一段動畫,這段動畫色彩豐富但依然清晰流暢,是怎麼做到的?
·
▲GIF演示
想要弄清上面的問題,最簡單直接的方法就是下載原文的素材看一看。
還有一個一舉兩得的方法,那就是
去「品牌時光機」SVG案例庫搜一搜,如果恰好這個案例支援
一鍵還原
,你不僅能看到素材長啥樣,還能知道使用了什麼元件的互動效果。
該功能只有編輯器高階版會員才可以完全使用,如果沒有高階會員,也可以檢視相關元件,同樣非常方便。
目前
Apple
、
寶馬中國
、
GQ實驗室
等品牌都有部分案例支援一鍵還原啦,整個案例庫支援一鍵還原的案例總數達6000多,陸續會有更多品牌和案例加入進來。
Apple支援一鍵還原的圖文:
寶馬中國支援一鍵還原的圖文:
GQ實驗室支援一鍵還原的圖文: