邊滑邊上色，全國人大的這個排版怎么做？
讀者在閱讀文章的過程中，幾乎每時每刻都能感受到參與其中。
這樣的排版除了貫穿全文的SVG軌跡移動，還有一直以來非常受歡迎的全文上滑效果。
之前給大家講過三層穿透式上滑（教程），今天再來給大家介紹一個邊滑邊上色效果，全國人大都在用。
感受一下：
*素材來自全國人大《交互漫畫｜全過程人民民主的新時代答卷》
組件：雙層滑動-前景上滑(支持多張)
編號：10203（組件）
在交互上，它只需兩層圖片即可，采用的是雙層前景上滑，背景層靜止不動；它的重點在于設計，一是背景層的顏色設計，二是前景層每張圖片的鏤空設計。
背景層顏色為分段式，上面部分為想要上色的顏色，下面部分為前景層的主色；前景層需要上色的位置制作為鏤空的：
再來看一個效果更明顯的案例，來自嘉里合集：
*素材來自嘉里合集 The Lightbox《新品丨重磅升級！level+++++++1！》
組件：雙層滑動-前景上滑(支持多張)
編號：10203（組件）
它的背景層和前景層結構如下：
如果大家還不明白，可以在 「品牌時光機」公眾號后臺對話框回復關鍵詞「上色」獲取以上兩個案例的全部素材仔細查看。
下面以第2個嘉里合集的效果為例，一起看下如何排版吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：雙層滑動-前景上滑(支持多張)
編號：10203（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「滑動」-「雙層前景」分類中找到「雙層滑動-前景上滑(支持多張)」組件，或者直接搜索組件編號10203，點擊選擇。
第2步：上傳圖片素材
點擊右側「換圖」按鈕上傳一張背景圖。背景圖尺寸與第一張前景圖尺寸或比例一致。
點擊右側「+」號批量上傳前景圖。滑動范圍由第一張前景圖決定。所有圖片的寬度保持一致。
前景圖順序上傳錯誤可直接拖動調整。
第3步：導入公眾號后臺
點擊最右側「預覽草稿」隨時預覽效果，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）