局部視頻、局部切換、局部滑動……要怎么做？
在一張圖片上面，能玩出什么花樣？
在排版中，我們經(jīng)常看到的都是一整張圖觸發(fā)一個(gè)交互，但實(shí)際上在1張圖片上是可以添加多個(gè)觸發(fā)區(qū)域的，教程戳：《1張圖片上添加多個(gè)彈出圖/超鏈接/小程序/公眾號/視頻號，怎么弄？》
今天我們再來說說在1張圖片上局部設(shè)置交互的玩法，注意不是局部設(shè)置觸發(fā)區(qū)，而是直接以1張圖片為背景，在這張圖片上面的某個(gè)位置設(shè)置效果。
最簡單的就是在1張圖片的某個(gè)位置再疊加1張圖片，比如錦頤連鎖酒店的這個(gè)例子：
*素材來自錦頤連鎖酒店《【消息通知】春節(jié)免房券，限量發(fā)放！》
組件：雙層圖片(第二層自定義大小及位置)點(diǎn)此0元購
編號：10291（組件）
就是在背景圖左側(cè)上加了一張GIF圖：
還可以在圖片上的局部添加視頻的交互，BOE招聘：
*素材來自BOE招聘《校招寶典004 | 探秘我們BOE人的真實(shí)生活》
組件：視頻-無縫拼接(可調(diào)整大小及位置)點(diǎn)此0元購
編號：10152（組件）
華為終端這個(gè)，在一張圖片上的局部再加一個(gè)點(diǎn)擊切換圖片的交互：
*素材來自華為終端《端午另一面,「粽」是與眾不同》
組件：點(diǎn)擊-局部切換圖片(可調(diào)整大小及位置)點(diǎn)此0元購
編號：10163（組件）
NewBalance中國在一張圖片的局部設(shè)置左滑圖片：
*素材來自NewBalance中國《New Balance x Stone Island再續(xù)新章》
組件：雙層滑動-前景左滑(自動對齊、可調(diào)整大小及位置)點(diǎn)此0元購
編號：10482（組件）
法拉利中國的在背景圖的特定區(qū)域輪播：
*素材來自法拉利中國《法拉利認(rèn)證易手車金融服務(wù)》
組件：自動-輪播Banner(自定義區(qū)域)
編號：11187（組件）
可以看到，GIF、視頻、點(diǎn)擊切換、輪播、滑動等都可以在1張圖片的局部設(shè)置，交互位置支持隨意擺放，給人一種「畫中畫」的高級感。
下面以華為終端的「點(diǎn)擊-局部切換圖片」的交互效果為例，一起看下制作教程吧。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：點(diǎn)擊-局部切換圖片(可調(diào)整大小及位置)
編號：10163（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「點(diǎn)擊」-「局部切換」分類中找到「點(diǎn)擊-局部切換圖片(可調(diào)整大小及位置)」組件，或者直接在搜索框中搜索組件編號10163，點(diǎn)擊選擇。
第2步：上傳圖片
點(diǎn)擊頁面右側(cè)「換圖」按鈕上傳底圖、單擊前、單擊后的圖片。單擊前和單擊后兩張圖片尺寸保持一致。
第3步：設(shè)置點(diǎn)擊切換區(qū)域
雙擊編輯區(qū)底圖，出現(xiàn)設(shè)置切換區(qū)域的窗口，窗口中的紅色色塊代表著切換區(qū)域。
用鼠標(biāo)拖動圖片調(diào)整色塊位置和大小。
第4步：設(shè)置動畫時(shí)間和圖片寬度類型
拖動滑桿設(shè)置「動畫時(shí)間」，如果切換的是GIF，一般調(diào)整為0.1s。圖片寬度類型，一般默認(rèn)為自適應(yīng)。
第5步：導(dǎo)入公眾號后臺
點(diǎn)擊最右側(cè)「預(yù)覽草稿」掃碼預(yù)覽效果，效果滿意后點(diǎn)擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉(zhuǎn)載請?jiān)谖恼麻_頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）