戳戳戳戳戳戳戳戳戳戳戳戳泡泡
這篇文章會讓你戳不停。
在兒童節(jié)SVG交互圖文案例合集中，局部氣候調(diào)查組的《「送你一張泡泡紙」》文章中的排版深受大家喜愛。
今天就教大家如何實現(xiàn)同款效果。
我們再來體驗一下捏泡泡紙：
*素材來自局部氣候調(diào)查組《「送你一張泡泡紙」》
組合：五列布局
編號：11106（組合）
組件：點擊-瞬間切換圖片
編號：10063（組件）
組件：零高圖片
編號：10224（組件）
這種重復(fù)性點擊的SVG排版效果，其實有很多，每隔一段時間出來大家還是玩不厭。
早期的比如三三星球的戳瓶子：
*素材來自三三星球《風(fēng)靡朋友圈的小瓶子，互動升級版來了！》
組合：四列布局
編號：10151（組合）
組件：連續(xù)點擊-切換多張圖片
編號：10055（組件）
組件：零高圖片
編號：10224（組件）
組件：遮罩
編號：10829（組件）
還有英菲尼迪的戳藥丸：
*素材來自英菲尼迪《假期綜合癥治愈藥丸》
組合：三列布局
編號：10150（組合）
組件：點擊-瞬間切換圖片
編號：10063（組件）
組件：零高圖片
編號：10224（組件）
下面以局部氣候捏泡泡紙的的效果為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組合：五列布局
編號：11106（組合）組件：點擊-瞬間切換圖片
編號：10063（組件）
組件：零高圖片
編號：10224（組件）
第1步：選擇組合
登錄 iPaiban Pro 編輯器后，點擊編輯器左側(cè)「組合」按鈕，找到「五列布局」組合，或者直接搜索組合編號11106，點擊選擇。
第2步：進入組合編輯模式
如下所示，點擊「點擊此處配置」，進入組合編輯模式。
第3步：設(shè)置宮格內(nèi)容
依次拖動「點擊-瞬間切換圖片」組件到宮格組件位中。
然后點擊「換圖」按鈕上傳圖片即可。注意每個宮格中的圖片尺寸需保持一致。
第4步：添加多組交互
內(nèi)容編輯完畢后，我們點擊左上角「保存并退出」編輯模式來到首頁。
因為有多行泡泡紙，所以選擇插入多次五列布局，重復(fù)前面步驟制作其他行效果。
第5步：添加背景圖片
添加「零高圖片」組件上傳一張未切分的完整圖片作為背景，目的是為了避免宮格之間不必要的縫隙。
*注意「零高圖片」組件需上移至最上方，上傳的圖片會自動成為下方組件的背景。
第6步：導(dǎo)入公眾號后臺
點擊最右側(cè)「預(yù)覽草稿」，效果滿意后接著點擊「同步至微信后臺」就可以了。
使用同步功能無需頻繁在編輯器和微信后臺切換，同步成功后可以立即掃描二維碼查看。
如需局部導(dǎo)入可參考《iPaiban Pro小助手安裝和使用教程》中導(dǎo)入功能的「導(dǎo)入代碼」部分。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）