↑↓←→
SVG交互排版的一大魅力在于，都是同樣的效果，不同人卻總能做出不同的創意。
今天給大家來個有獎征集：留言說說下方連續點擊移出圖片效果，你能想到什么創意玩法？
如果你的留言被放出，將會送你1個月的品牌時光機案例庫會員，活動時間截至5月26日（本周五）14點整。
連續點擊體驗下：
*素材來自深圳地鐵《這套「文明乘車」卡片，是時候該收藏了！》
組件：連續點擊-移出圖片(方向可調,有觸發區)
編號：11450（組件）
該效果組件的特點是，支持連續點擊，點擊后圖片以向上、向下、向左或向右的方向移出切換，每張圖片移出的方向可自定義，可以調整每次點擊的觸發區。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：連續點擊-移出圖片(方向可調,有觸發區)
編號：11450（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「自動」-「 水平移入移出」分類中找到「連續點擊-移出圖片(方向可調,有觸發區)」組件，或者直接搜索組件編號11450，點擊選擇。圖片
第2步：上傳圖片素材
點擊頁面右側「+」號按鈕，上傳要切換的圖片，至少上傳2張，至多上傳11張，所有圖片的尺寸需保持一致。
第3步：設置觸發區域
雙擊編輯區的圖片，調出觸發區域調整窗口，紅色色塊代表觸發區域。
拖動色塊即可調整觸發區域的位置，點擊「下一張」調整后面圖片的觸發區，點擊「為所有的圖片應用此配置」統一設置所有圖片的觸發區為同一位置和大小。
如需精確調整觸發區的大小和位置，可通過手動輸入數值進行設置，調整好就可以關閉彈窗，觸發區域就設定成功了。
第4步：調整動畫參數
在右側圖片位置的下方，滑動滑桿可調整圖片移出的動畫時間，如無特殊要求保持默認即可。
接著可設置每張圖片移出的方向，提供有上、下、左、右」4個方向可選。
第5步：導入公眾號后臺
點擊最右側「預覽草稿」預覽效果，效果滿意后點擊「同步至微信后臺」就可以了。
使用同步功能不用頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼預覽在公眾號的效果。
如需局部導入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）