這篇美拉德三層穿透上滑圖文，怎么做啊？

原創贊收藏評論

舉報 2023-09-26

掃描,分享朋友圈

每向上滑動一下，正好切換一屏，滑動過程中有固定的元素時隱時現。

這是上周在9月會員日用到的一個排版效果，也是最近小伙伴們問的比較多的一個效果。這里直接放過來再一起體驗一下：

*素材來自i排版編輯器《點擊開啟美拉德反應(o°ω°o)》

組合：上滑組合(三層滑動,自動對齊)

編號：11756（組合）

滑動共分為3層，中間層不動，背景層和前景層一起滑動。很多人想起了之前介紹的局部氣候調查組的三層上滑效果（教程）：

*素材來自局部氣候調查組《月亮看見了》

組件：三層滑動-上滑(多張)

編號：10803（組件）

不同的是這次的效果是一屏一屏滑動，每次中間層元素可以出現在屏幕的固定位置，所以可以用作滑動組詞、組句、拼圖等創意。

更多創意玩法等待大家去發掘，今天我們來看看它是如何制作的吧。

詳細教程：

工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com

組合：上滑組合(三層滑動,自動對齊)

編號：11756（組合）

第1步：選擇組合

登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組合」按鈕，在「滑動組合」分類中找到「上滑組合(三層滑動,自動對齊)」組合，或者在「組合」中直接搜索編號11756，點擊選擇。

第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，分為展開前和滑動布局兩塊設置區域。展開前上傳中間層和背景層圖片，滑動布局中設置前景層內容。

第3步：上傳中間層和背景層圖片
點擊「展開前」區域，在右側繼續點擊「換圖」按鈕上傳1張中間層圖片，點擊「+」號批量上傳多張背景層圖片。
中間層圖片應為鏤空式，可以露出背景層圖片。背景層圖片需和中間層圖片尺寸相同，背景層圖片數量決定了滑動屏數。

第4步：設置前景層內容
滑動布局中設置的是前景層，前景層不局限于單純的無縫圖，還可以嵌套使用各種交互效果。
①滑動布局中的滑動組數量需與背景層圖片數量相同，每一個滑動組對應一張背景層圖片，點擊「添加組件位」即增加一個滑動組。

如果預覽時有下面提示就說明滑動組數量和背景層圖片數量不一致，需增加或減少滑動組。

②在滑動組中，點擊「增加·槽」即添加了一個小組件位，此時我們就可以拖動左側需要的組件到小組件位中，一個滑動組中可以添加多個小組件位。

拖動「全能無縫圖」組件到小組件位中：

拖動組件進來后按需上傳圖片，剩余滑動組按照同樣流程設置即可。
注意，因為每一個滑動組對應一張背景層圖片，所以一個滑動組中無論使用多少組件，所有圖片的高度應等于一張背景層圖片高度。

第5步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。

使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》

制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器1500+組件/組合現已全部支持免費試用了。

新用戶在「新手禮包」可領取3天企業標準版會員免費商用，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。