重疊疊疊疊疊疊疊疊疊疊疊展開
平級內容很多，又不想文章太長？
或許你可以試試這種具有重疊感的點擊展開排版效果。
這也是一直以來都深受歡迎的一種排版形式。先來體驗下：
*素材來自金典SATINE《啊切~誰在打噴嚏？》
組合：點擊展開(有觸發區)
編號：10051（組合）
組件：全局背景
編號：10465（組件）
看著像是新的交互形式，但其實就是多個展開的重復使用。
之所以會有重疊感，是因為在排版中每一個后面的展開都壓住了前面展開的一部分內容。
如何能讓后面的展開壓住前面的展開呢？
很簡單，使用「邊距」功能。
在 iPaiban Pro 黑科技編輯器中連續插入多個「點擊展開」組合后，將展開組合的上方外邊距調整為一定的負值，所調整邊距的展開就會向上壓住前面展開對應的高度。
再來看1個效果：
*素材來自武漢廣播電視臺《拼過2024，可以這樣看武漢》
組合：點擊展開
編號：10307（組合）
組件：全局背景
編號：10465（組件）
這個效果和第1個效果相比，不同之處是點擊展開前重疊，點擊展開后不再重疊。它多了一個調整展開高度的步驟。
下面以第2個效果為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：點擊展開
編號：10307（組合）
組件：全局背景
編號：10465（組件）
第1步：設置全局背景
①選擇「全局背景」組件
點擊編輯器左側「組件」按鈕，在「特殊」分類中找到「全局背景」組件，或者直接搜索組件編號10465，點擊選擇。
②上傳圖片
點擊右側換圖上傳全局背景圖片。圖片最好為純色或背景簡單一些，尺寸沒有限制，全局背景會根據后面的內容自動按需重復。
這里設置全局背景的目的是，全局背景可以作為展開的背景，讓交互前后銜接更自然。
第2步：設置展開效果
①編輯「點擊展開」組合
點擊編輯器左側「組合」按鈕，在「花樣展開」分類中找到「點擊展開」組合，或者直接搜索組合編號10307，點擊選擇。
點擊「編輯組合」，進入組合編輯模式。在組合編輯模式中，我們需要分別設置展開前和展開后的內容。
②設置展開前內容
點擊右側「換圖」按鈕上傳展開前圖片。
③設置展開后內容
想要設置展開后內容，我們首先要確認展開后的內容有哪些交互效果，會用到哪些交互組件，然后在左側依次拖動相應組件到展開后區域組件位中。
武漢廣播的案例只用到一個無縫圖，故拖動一個「全能無縫圖」組件到組件位中，然后點擊右側「換圖」按鈕上傳圖片。
④設置展開時長
點擊右側紅色小三角符號，可直接輸入數值設置展開時長。
案例中后面的展開壓住前面的展開73px內容，為了讓前面的展開效果展開后不被蓋住，前面的展開把展開高度增加73px，就正常顯示了。
⑤保存并退出
內容編輯完畢后，我們點擊左上角「保存并退出」編輯模式來到首頁。
第3步：增加多個展開
繼續選擇「點擊展開」組合，按照第2步的步驟進行設置。
第4步：調整外間距
除第1個展開外，將其他展開組合的上方外邊距調整為負數。
這里的數值根據我們想要重疊的范圍來定，比如武漢廣播的這個案例設置為-73px。
第5步：預覽效果并導入公眾號后臺
點擊頁面最右側「預覽草稿」可隨時預覽效果，盡量使用手機掃碼預覽。
調整效果滿意后點擊「同步至微信后臺」就同步到自己的公眾號就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）