“哇塞！雙層滑動后展開，原來可以這么排！”
雙層滑動我們大都見過，點擊展開的排版效果更是常見。
當把這兩個常見的效果組合在一起，妹想到效果感覺提升了一個level！
先來看下「前景左滑+點擊展開」的交互，例如WAHIN華凌的這篇圖文：
*素材來自WAHIN華凌《尋風去丨重啟時光 收獲滿倉》
組合：前景左滑+點擊展開
編號：11387（組合）
同樣地，使用iPaiban Pro 黑科技編輯器還可以實現「前景右滑+點擊展開」的交互：
*素材來自THE BALVENIE百富單一麥芽威士忌《一株高質量成熟大麥，需要具備什么？》
組合：前景右滑+點擊展開
編號：11391（組合）
體驗下「背景左滑+點擊展開」的交互：
*素材lululemon 《在藝術中熱汗，是什么感覺？》
組合：背景左滑+點擊展開
編號：11900（組合）
「背景右滑+點擊展開」的SVG效果：
*素材來自Nespresso奈斯派索《限量·精品 | 巴布亞新幾內亞的高山恩賜》
組合：背景右滑+點擊展開
編號：11902（組合）
可以看到，「滑動后展開」可以分為前景左滑、前景右滑、背景左滑、背景右滑等多種不同方式，讓圖文排版各具特色。
以WAHIN華凌的效果為例，下面一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：前景左滑+點擊展開
編號：11387（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」-「前景滑動+點擊展開」分類中找到「前景左滑+點擊展開」組合，或者直接在搜索框中搜索組合編號11387，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
第3步：設置「展開前」內容
點擊「展開前」區域，接著點擊右側「換圖」按鈕，上傳背景圖片，注意背景圖不透明，作為滑動圖透明區域的顯示圖。
點擊+號，依次上傳滑動圖，注意滑動圖的寬高和底圖一致，需要有透明區域，滑動時可以看到底圖。
第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
第5步：設置動畫參數
點擊右側紅色小三角符號，分別設置展開時長、加減展開高度（px）支持負數。
展開高度一般無需調整，但當大家在手機上預覽時，如果發現展開后有多余的空白或者沒有展現出全部內容，這時候可以通過「加減展開高度」使其恰好展開。
第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）