“這種進(jìn)度條式的滑動(dòng)，是怎么做的？”
大家向左滑動(dòng)下圖，注意圖片上的文字變化：
*素材來自戴爾《Buff疊滿，戴爾官網(wǎng)福利真的強(qiáng)！》
沒錯(cuò)，在滑動(dòng)中圖片上的一些文字就像進(jìn)度條一樣顯現(xiàn)出來，其中「色彩」二字在滑動(dòng)中還有色彩的變化。
最近來問這種效果如何制作的不少，就像《愛情粉碎機(jī)》介紹的滑動(dòng)粉碎文字效果一樣，其實(shí)它的難度和巧妙之處不在于交互，而在于素材的制作。
我們把兩張主要的滑動(dòng)素材用小助手插件下載看下就明白了，點(diǎn)擊可查看大圖????????
該效果使用雙層前景滑動(dòng)相關(guān)組件制作而成，前景層需要重點(diǎn)展示的文字作了鏤空設(shè)計(jì)，背景層在對(duì)應(yīng)位置設(shè)計(jì)有顏色條，這樣在滑動(dòng)過程中就有了開頭的效果。
在 iPaiban Pro 黑科技編輯器中雙層前景滑動(dòng)的相關(guān)組件，除了單純的圖片滑動(dòng)，還包括可添加超鏈接和小程序的，這里我們以普通的「雙層滑動(dòng)-前景左滑」為例，一起看下教程吧：
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：雙層滑動(dòng)-前景左滑
編號(hào)：10018（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組件」按鈕，在「滑動(dòng)」-「雙層前景」分類中找到「雙層滑動(dòng)-前景左滑」組件，或者直接在搜索框中搜索組件編號(hào)10018。
第2步：上傳圖片素材
點(diǎn)擊右側(cè)「換圖」按鈕上傳底圖，點(diǎn)擊「+」號(hào)批量上傳前景滑動(dòng)圖。
第3步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊右側(cè)「預(yù)覽草稿」可預(yù)覽效果，效果滿意后繼續(xù)點(diǎn)擊「同步至微信后臺(tái)」同步到自己的公眾號(hào)就可以了。
使用同步功能可以不用頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃碼預(yù)覽二維碼查看。
如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊(cè)，編輯器1500+組件/組合現(xiàn)已全部支持免費(fèi)試用了。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會(huì)員免費(fèi)商用，以及22個(gè)常用必備組件的大禮包（1年）。隨禮包附贈(zèng)千元優(yōu)惠券，每單最高立降500元。
2023年6月12-30日618活動(dòng)買贈(zèng)福利：
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_頭和結(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)論
暫無評(píng)論哦，快來評(píng)論一下吧！
全部評(píng)論（0條）