這些讓人想要夸夸的三層切換效果案例，都是怎么實現的？
和三層切換交互有關的圖文，總是會出現一些好案例，進而帶火對應的交互效果。
前兩年流行起來的貫穿全文的穿透式三層上滑（示例及教程），就是一個典型的例子。
最近一些讓人忍不住想要夸夸的案例，也是三層切換的，對應的交互效果也深受歡迎了起來。
第1種是自動對齊的三層上滑，之前在教程《被夸「好有創意」，字節跳動這篇排版是怎么做的？》介紹過，最近時尚芭莎也使用了這個交互，配合鏤空式的圖片設計，呈現的效果同樣優秀：
*素材來自時尚芭莎《都市里的City Love，City不City》
組件：三層滑動-上滑(多張,自動對齊）
編號：11754（組件）
第2種是點擊三層移動切換，之前也在《一鍵換場景！點擊三層移動切換教程來了》一文中詳細介紹了，我們再通過人民網的一個案例感受下：
*素材來自人民網《你以為的我，真的是我？》
組件：點擊-三層移動切換
編號：11882（組件）
今天再給大家介紹一種——自動對齊的三層左滑，同樣是中間層不動，前景和背景層一起切換，非常適合換裝、換場景等相關的排版創意。
看下奧迪的應用：
*素材來自奧迪《左滑 心動五次》
組件：三層滑動-左滑(自動對齊)
編號：10739（組件）
前兩個案例在交互下面都有對應的教程，下面一起看看案例3奧迪的自動對齊的三層左滑是如何制作的吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：三層滑動-左滑(自動對齊)
編號：10739（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組件」按鈕，在「滑動」-「三層」分類中找到「三層滑動-左滑(自動對齊)」組件，或者直接在搜索框中搜索組件編號10739，點擊選擇。
第2步：上傳圖片
點擊右側「換圖」上傳中間的圖片，若圖片上傳錯誤，還可點擊換圖進行調整。
點擊「＋」號分別上傳前景和背景圖，注意每張圖片的寬高一致且前景圖和背景圖的數量一樣。
第3步：導入公眾號后臺
點擊最右側「預覽草稿」預覽效果，根據效果可隨時進行調整。
效果滿意后點擊「同步至微信后臺」等待同步成功，然后掃碼預覽效果即可。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）