“自動對齊的三層上滑，滑動中怎么加入其他效果??？”
每向上滑動一下，正好切換一屏，滑動過程中有固定的元素時隱時現。
這是中國民生銀行最近用到的一個排版效果，也是比較容易出創意一個效果。這里直接放過來體驗一下：
*素材來自中國民生銀行《1分鐘硬控養老citywalk，開啟幸福未來》
組合：三層上滑組合(自動對齊)
編號：11756（組合）
滑動共分為3層，中間層不動，背景層和前景層一起一屏一屏地滑動。很多人想起了之前介紹的字節跳動的三層上滑效果（教程）：
*素材來自字節跳動《字節跳動2023年度盤點已生成》
組件：三層滑動-上滑(多張,自動對齊)
編號：11754（組件）
可以看出這種排版非常適合用作滑動組詞、組句、拼圖、變裝等創意，不同的是這次的滑動的內容不再是單純的圖片，還加入了另外的一些SVG交互，使得體驗更加豐富。
像前面中國民生銀行的是加入了超鏈接圖片，下面邁克高仕的案例則加入了左滑、小程序圖片、序列幀動效等效果：
*素材來自MICHAEL KORS邁克高仕《她的閃耀時刻》
組合：三層上滑組合(自動對齊)
編號：11756（組合）
如果你也想在每屏滑動的內容中加入更豐富的交互，那自動對齊的三層上滑組件已經不能滿足你，而是需要使用自動對齊的三層上滑組合。
下面以中國民生銀行的效果為例，一起看下如果使用吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：三層上滑組合(自動對齊)
編號：11756（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組合」按鈕，在「滑動組合」分類中找到「三層上滑組合(自動對齊)」組合，或者在「組合」中直接搜索編號11756，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，分為「中間圖和背景圖」、「前景內容」兩塊設置區域?！?strong>中間圖和背景圖」區域上傳中間層和背景層圖片，「前景內容」區域設置前景層內容，前景層內容可嵌套組件。
第3步：上傳中間層和背景層圖片
點擊「中間圖和背景圖」區域，在右側繼續點擊「換圖」按鈕上傳1張中間層圖片，點擊「+」號批量上傳多張背景層圖片。
中間層圖片應為鏤空式，可以露出背景層圖片。背景層圖片需和中間層圖片尺寸相同，背景層圖片數量決定了滑動屏數。
第4步：設置前景層內容
「前景內容」區域中設置的是前景層，前景層不局限于單純的無縫圖，還可以嵌套使用各種交互效果。
①滑動布局中的滑動位數量需與背景層圖片數量相同，每一個組件位對應一張背景層圖片，點擊「添加組件位」即增加一個組件位。
如果預覽時有下面提示就說明滑動位數量和背景層圖片數量不一致，需增加減少組件位，或增加減少背景圖。
②組件位中可嵌套各種效果組件。如圖拖動「全能無縫圖」組件到組件位中：
拖動組件進來后按需上傳圖片，剩余滑動位按照同樣流程設置即可。每個組件位的圖片尺寸應與背景層圖片尺寸保持一致。
第5步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）