“盒馬這種鏡頭推進式彈窗，怎么做啊？”
今天萬圣節，今天我們用一個排版先感受下節日氛圍。
來自Continental德國馬牌輪胎的一篇萬圣節圖文，點擊浮動的按鈕體驗一下：
*素材來自Continental德國馬牌輪胎《德國馬牌輪胎萬圣節主題樂園上線！你能通關嗎？》
組件：點擊-鏡頭推進+聚焦放大式彈窗
編號：11913（組件）
在背景圖上點擊浮動的按鈕，圖片像被鏡頭拍攝一樣推進聚焦變化，并彈出彈窗，點擊彈窗的關閉按鈕返回原樣，可繼續循環點擊。
這種效果最常用于地圖上有多個地標的排版創意，類似的還有盒馬這篇：
*素材來自盒馬《胃，新疆去不去撒》
組件：點擊-鏡頭推進+聚焦放大式彈窗
編號：11913（組件）
最近時不時有小伙伴來問咨詢這個效果，大家使用 iPaiban Pro 黑科技編輯器的「點擊-鏡頭推進+聚焦放大式彈窗」組件（編號：11913）即可制作。
iPaiban Pro 黑科技編輯器還有一個「點擊-鏡頭推進+聚焦放大式彈窗+展開」組合（編號：11917），可以實現在彈窗后面接展開的效果，一起體驗下（點擊「查看詳情」可展開）：
*素材來自小黃人科技《排版好難？00后：看我的！》
組合：點擊-鏡頭推進+聚焦放大式彈窗+展開
編號：11917（組合）
今天咱們就以第1個Continental德國馬牌輪胎的萬圣節排版為例，來看下如何實現吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：點擊-鏡頭推進+聚焦放大式彈窗
編號：11913（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「彈窗」分類中找到「點擊-鏡頭推進+聚焦放大式彈窗」組件，或者直接在搜索框中搜索組件編號11913，點擊選擇。
第2步：上傳圖片素材
刪除示例圖片后，依次點擊「換圖」和「+」號上傳圖片。所有圖片尺寸保持一致。
所需圖片素材包括四部分，分別為真實背景圖、觸發區定位圖+彈窗關閉遮罩、點擊提示圖片、彈窗圖片。本文案例中的素材上傳效果如下：
第3步：設置動畫參數
拖拽滑軌設置動畫參數，一般保持默認即可。
第4步：設置觸發區域
雙擊編輯區的圖片調出「觸發區域」設置窗口，分別拖拽色塊到指定位置設置每個彈窗的觸發區域。
點擊「下一張」設置彈窗的關閉觸發區域。
第5步：導入公眾號后臺
該效果在編輯器無法預覽，設置完畢后點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）