GQ這個滑動粉碎文字的排版，真是「好東西」！
最近電影《好東西》廣受好評，而在之前GQ實驗室公眾號（現智族Lab）的一篇關于女性議題的文章中，用到的SVG效果，也十分有東西！
我們一起看下：
*素材來自智族Lab《我，普通女生：▇▇，▇▇。》
組件：夾層滑動-左滑
編號：10239（組件）
向左慢慢滑動，文字從耳朵穿過，前半段文字變色，后半段穿過的文字被粉碎。評論區點贊最高的留言直夸「絕了 這排版」。
這個效果原理其實很簡單，主要利用了圖片間的色彩關系，再配合前景圖層和背景圖層不動，中間文字圖層滑動的交互排版即可實現。
之前給大家介紹過一個類似原理的案例效果，感興趣戳：《愛情粉碎機》
以第一組為例，一起看下圖片素材：
背景層畫面左側紅色，右側白色；前景層畫面只有一個紅色耳朵，其他部分為鏤空狀態。
▲左：背景圖 右：前景圖
中間文字層，為白色、紅色間隔設計，其他部分鏤空，加個黑色背景大家就能看出來了：
素材制作好后，下面來看看是如何排版吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：夾層滑動-左滑(三層滑動中間左滑,支持多張圖)
編號：10239（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「滑動」-「夾層」分類中找到「夾層滑動-左滑(三層滑動中間左滑,支持多張圖)」組件，或者直接在搜索框搜索組件編號10239，點擊選擇。
第2步：上傳圖片素材
點擊兩個「換圖」按鈕分別上傳準備好的背景圖和前景圖。
點擊「+」號批量上傳中間層圖片。
注意所有圖片尺寸需保持一致。
第3步：導入公眾號后臺
點擊最右側「預覽草稿」預覽效果，效果滿意后接著點擊「同步至微信后臺」就可以了。
本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
本文系作者授權數英發表，內容為作者獨立觀點，不代表數英立場。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本內容為作者獨立觀點，不代表數英立場。
本文禁止轉載，侵權必究。
本文禁止轉載，侵權必究。
本文系數英原創，未經允許不得轉載。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）