“小紅書的這種視差相冊(cè)滑動(dòng)，怎么做的？”
滑動(dòng)大圖，小圖也會(huì)跟著動(dòng)。
最近不少小伙伴對(duì)這種視差相冊(cè)式的滑動(dòng)很感興趣啊，那今天就給大家講講，如何用 IPaiban Pro 黑科技編輯器快速實(shí)現(xiàn)這種效果。
照例先來(lái)體驗(yàn)一下。視差相冊(cè)滑動(dòng)最常見(jiàn)的滑動(dòng)方式有兩種，一種是自動(dòng)對(duì)齊的左滑，一種是超順滑的上滑。
視差相冊(cè)左滑：
*素材來(lái)自UGG官方《LOVE IS LOVE》
組件：視差相冊(cè)-左滑(自動(dòng)對(duì)齊)點(diǎn)此免費(fèi)領(lǐng)取
編號(hào)：11844（組件）
視差相冊(cè)上滑：
*素材來(lái)自小紅書《起猛了，看見(jiàn)外灘同時(shí)升起200個(gè)月亮》
組件：視差相冊(cè)-上滑點(diǎn)此免費(fèi)領(lǐng)取
編號(hào)：11851（組件）
對(duì)應(yīng)效果使用的組件已經(jīng)在效果下方標(biāo)注了，有時(shí)如果配合「遮罩」組件給視差相冊(cè)上方加一個(gè)前景圖，在視覺(jué)體驗(yàn)上會(huì)更佳。
比如視差相冊(cè)左滑加一個(gè)相框透明前景圖，下方小圖就給人感覺(jué)在相框內(nèi)滑動(dòng)：
*素材來(lái)自UGG官方《LOVE IS LOVE》
組件：視差相冊(cè)-左滑(自動(dòng)對(duì)齊)點(diǎn)此免費(fèi)領(lǐng)取
編號(hào)：11844（組件）
組件：遮罩
編號(hào)：10829（組件）
視差相冊(cè)上滑加一個(gè)上下漸變透明的前景圖，滑入滑出的效果就更自然：
*素材來(lái)自小紅書《起猛了，看見(jiàn)外灘同時(shí)升起200個(gè)月亮》
組件：視差相冊(cè)-上滑點(diǎn)此免費(fèi)領(lǐng)取
編號(hào)：11851（組件）
以加相框前景的左滑效果為例，一起看下具體如何制作吧。
詳細(xì)教程：
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com
組件：視差相冊(cè)-左滑(自動(dòng)對(duì)齊)
編號(hào)：11844（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組件」按鈕，在「滑動(dòng)」-「視差滑動(dòng)」分類中找到「視差相冊(cè)-左滑(自動(dòng)對(duì)齊)」組件，或者直接搜索組件編號(hào)11844，點(diǎn)擊選擇。
第2步：上傳圖片素材
點(diǎn)擊右側(cè)「換圖」按鈕上傳背景圖，點(diǎn)擊兩個(gè)「+」號(hào)分別上傳上方滑動(dòng)圖和下方滑動(dòng)圖。所有圖片尺寸保持一致，上下方滑動(dòng)圖數(shù)量保持一致。
注意無(wú)論上方滑動(dòng)圖還是下方滑動(dòng)圖，滑動(dòng)圖的內(nèi)容都需設(shè)計(jì)在圖片左右居中位置。如下所示：
*左：上方滑動(dòng)圖 右：下方滑動(dòng)圖
第3步：選擇圖片跳轉(zhuǎn)
該效果可以選擇為滑動(dòng)圖添加超鏈接或小程序跳轉(zhuǎn)。本文的演示案例沒(méi)有跳轉(zhuǎn)，保持默認(rèn)「無(wú)」即可。
第4步：設(shè)置前景圖
如果不需要為視差相冊(cè)設(shè)置前景圖，可忽略此步驟。如果需要，可通過(guò)「遮罩」組件來(lái)實(shí)現(xiàn)。
搜索組件編號(hào)10829找到「遮罩」組件，點(diǎn)擊選擇，然后上傳準(zhǔn)備好的前景圖片，該圖片將會(huì)自動(dòng)覆蓋在視差相冊(cè)效果上方。注意圖片尺寸和視差相冊(cè)中的圖片尺寸保持一致。
第5步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊最右側(cè)「預(yù)覽草稿」可隨時(shí)掃碼預(yù)覽效果，效果滿意后點(diǎn)擊「同步至微信后臺(tái)」同步到自己的公眾號(hào)就可以了。
使用同步功能可以不用頻繁在編輯器和微信后臺(tái)切換，同步成功后可以立即掃碼預(yù)覽二維碼查看。
如需局部導(dǎo)入可參考：《iPaiban Pro小助手安裝和使用教程》
轉(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)論
暫無(wú)評(píng)論哦，快來(lái)評(píng)論一下吧！
全部評(píng)論（0條）