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