「點擊展開」和「遮罩」這對CP，在圣誕太好磕了
一個已經司空見慣的點擊展開效果，一個平平無奇的遮罩圖片。
兩者加起來，遮罩跟著展開走，排版就變得有趣起來了。
圣誕將至，想要與圣誕結合，跟隨展開的元素可以使用圣誕樹、圣誕老人、圣誕帽等。
下面我們來看一個圣誕圖文排版案例：
*素材來自Jameson尊美醇《空瓶回收｜一起打造尊美醇圣誕樹》
組合：點擊消失+展開(可嵌套展開,有觸發區)
編號：11848（組合）
組件：遮罩
編號：10829（組件）
整體這是一個在展開中套展開的效果，它有意思的地方是，每次點擊展開，都會有一個瓶子跟著下走。
瓶子回收是文章的主題，瓶子元素貫穿全文意味著主題貫穿了全文。
類似的還有飛凡汽車的這篇《冷冷冷冷冷冷冷》：
*素材來自飛凡汽車RISING AUTO《冷冷冷冷冷冷冷》
組合：點擊消失+展開(可嵌套展開,有觸發區)
編號：11848（組合）
組件：遮罩
編號：10829（組件）
帶有鏤空式設計的溫度計，與每次展開的背景顏色產生互動，也是很有意思。
下面以第一個排版為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊消失+展開(可嵌套展開,有觸發區)
編號：11848（組合）
組件：遮罩
編號：10829（組件）
第1步：選擇組合
登錄 iPaiban Pro 黑科技編輯器后，點擊編輯器左側「組合」按鈕，在「嵌套展開」分類中找到「點擊消失+展開(可嵌套展開,有觸發區)」組合，或者直接搜索組合編號11848，點擊選擇。
第2步：進入組合編輯模式
如下所示，點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，我們需要設置展開前和展開后的內容。
第3步：設置展開前的內容
①點擊展開前區域，然后在右側點擊「換圖」按鈕上傳展開前的圖片。
②雙擊展開前區域，拖拽調整點擊觸發區。
第4步：設置展開后的內容
設置展開后的內容，總共分為3步：添加組件位-拖動組件/組合到組件位中-上傳素材。
每需要一個交互效果按照這3步走就可以，下面是動圖演示：
選擇拖動嵌套什么組件/組合大家根據自己想要的交互效果來定，這里案例中使用了「全能無縫圖」組件和「點擊消失+展開(可嵌套展開,有觸發區)」組合，放置如下所示：
第5步：編輯二級展開
在展開后的內容中拖入相關組件/組合后，接著上傳素材即可。點擊「編輯組合」繼續編輯嵌套的展開組合，步驟還是按照2、3、4步操作。
第6步：調整展開效果的參數
每一個展開組合至少可以調整3個參數：圖片切換時長、展開時長和展開高度，點擊頁面右側紅色小三角可以看到。
展開高度一般無需調整，但當大家在手機上預覽時，如果發現展開后有多余的空白或者沒有展現出全部內容，這時候就可以通過調整展開高度使其精準展開。
第7步：設置遮罩效果
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
點擊編輯器左側「組件」按鈕，在「特殊」分類中找到「遮罩」組件，或者直接搜索組件編號10829，點擊選擇。
然后在右側點擊「換圖」上傳跟隨展開移動的圖片。尺寸與點擊展開「展開前」的圖片保持一致。
第8步：導入公眾號后臺
內容編輯完畢后，點擊最右側「預覽草稿」，效果滿意后點擊「同步至微信后臺」就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）