“FENDI、Max Mara這些時尚大牌都愛用的相冊式滑動，要怎么做?”
推文多圖排版，簡單的左右滑動效果真是用得夠夠了？
今天給大家介紹一種相冊式滑動效果，簡簡單單，即可輕松實現高級感滿滿的圖片展示效果。
我們先看效果：
*素材來自Weekend Max Mara《里斯本日記》
組件：夾層滑動-上滑(三層滑動中間上滑,支持多張圖,自動對齊)
編號：12103（組件）
上下滑動大圖，左側的縮略小圖也會跟著變化，仿佛打開了手機相冊，流暢絲滑地切換著不同照片。
這種交互效果在于巧妙地運用了三層布局：背景圖、前景圖和中間滑動圖。背景圖和前景圖不變，中間圖層上下滑動。
背景層（左）和前景層（右）如下：
在背景圖和前景圖固定不變的情況下，中間圖層在作圖時包含一些小巧思：
下圖藍色框選區域為透明，展示對應的縮略小圖。紅色區域為半透明，遮蓋住其他縮略小圖。這樣在上下滑動的時候，形成一個視覺變化的效果。
該效果使用 iPaiban Pro 黑科技編輯器里的的「夾層滑動-上滑」組件（編號：12103）即可實現。非常適合品牌進行產品展示。
如果想要全部素材，大家在谷歌瀏覽器打開這篇圖文，然后使用 iPaiban Pro 小助手插件可一鍵下載圖文中的全部圖片。詳情戳：《iPaiban Pro小助手安裝和使用教程》
我們再來看FENDI的一個案例，滑動圖支持點擊跳轉小程序：
*素材來自FENDI《FENDI新年心愿》
組合：上滑組合(自動對齊)
編號：11382（組合）
組件：小程序-圖片(無角標)
編號：10015（組件）
因為加入了小程序，這個效果則需要「上滑組合(自動對齊)」組合（編號：11382）來制作。
下面以FENDI的案例為例，一起來看看這個效果是如何制作吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組合：上滑組合(自動對齊）
編號：11382（組合）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「滑動組合」分類中找到「上滑組合(自動對齊）」組合，或者直接在搜索框中搜索組合編號11382，點擊選擇。
第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。
在組合編輯模式中，左側為「滑動布局」設置區域，右側根據需要還可選擇上傳遮罩圖（即前景圖）和背景圖。
第3步：上傳遮罩圖或背景圖
遮罩圖和背景圖根據需要可傳也可不傳。如需要上傳遮罩圖和背景圖，點擊「換圖」按鈕分別上傳即可。這里的效果我們需要上傳：
注意滑動容器寬高以背景為準，如果不傳，默認為343*609。
第4步：設置滑動內容
「滑動內容」支持嵌套各種交互效果組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：
FENDI這篇主要用到了「小程序-圖片(無角標)」（編號：10015）。
第5步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。
繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）