滑動同時又展開，路易威登這個效果怎么做？

原創贊收藏評論

舉報 2023-10-24

掃描,分享朋友圈

「展開」和「滑動」都是最基礎常見的交互效果，相信大家已屢見不鮮，各種形式的「展開」和「滑動」玩法也花樣百出。
手機屏幕上劃一下，同時觸發圖片滑動和圖文展開的效果大家見過沒？

路易威登在圖文《風格預想》中讓「滑動」和「展開」夢幻聯動了，最近來問這個效果的不少，我們來體驗一下：

*素材來自路易威登《風格預想》

組合：左滑展開

編號：11769（組合）

*素材來自路易威登《?風格預想?》

組合：右滑展開

編號：11771（組合）

向左/右滑動，移出圖片的同時展開新的內容，展開后的內容可以嵌套各種效果組件。同時觸發滑動和展開的效果讓不少小伙伴們都感受新穎的交互體驗。

上面這兩個示例用 iPaiban Pro 黑科技編輯器里的「左滑展開」組合（編號11769）和「右滑展開」組合（編號11771）即可制作。支持調整滑動移出時長和展開時長。

那我們以「左滑展開」組合（編號11769）為例，來看看是如何制作的吧？

詳細教程：

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

組合：左滑展開

編號：11769（組合）

第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器右側「組合」按鈕，在「花樣展開」分類中找到「左滑展開」組合，或者直接在搜索框中搜索組合編號11769，點擊選擇。

第2步：進入組合編輯模式
點擊「編輯組合」，進入組合編輯模式。

在組合編輯模式中，分為展開前和展開后兩塊設置區域。

第3步：設置「展開前」內容
點擊「展開前」區域，在右側點擊2個「換圖」按鈕，分別上傳準備好的左滑前圖片和左滑后圖片。圖片尺寸需保持一致。

雙擊「展開前」區域上傳的圖片，調整點擊觸發的區域。

第4步：設置「展開后」內容
「展開后」的內容支持嵌套各種組件，需要什么效果就在左側「組件」分類中找到相應的組件拖動到組件位中，然后上傳需要的素材即可。
添加組件位-拖動組件到組件位中-上傳圖片，每需要一個樣式就按照這3步操作：

第5步：設置參數
點擊右側紅色小三角，可以設置左滑移出時長和展開時長。
如果預覽效果發現內容沒有完全展開或者展開過長，可以通過「加減展開高度（px）」進行調整，輸入負數減小展開高度。

第6步：導入公眾號后臺
內容編輯完畢后，點擊左上角「保存并退出」逐步退出組合編輯模式回到編輯器主頁面。

繼續點擊最右側「預覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。

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

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

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