Apple、小米、招商銀行、保時(shí)捷的這種視差滑動(dòng)，怎么做的？
什么是視差滑動(dòng)？它是指讓多層圖片以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺(jué)體驗(yàn)。
視差滑動(dòng)是一個(gè)總概念，它其實(shí)可以細(xì)分出很多不同的效果，之前給大家介紹過(guò)兩種，今天干脆放在一起體驗(yàn)對(duì)比一下，更能看出其中的區(qū)別。
每個(gè)效果下方都有對(duì)應(yīng)編輯器組件和詳細(xì)教程，文末附有案例素材的下載方式。
第1種為可以移入移出的前景視差滑動(dòng)：
▲來(lái)自「小米手機(jī)」
組件：前景視差滑動(dòng)-左滑(移入)
編號(hào)：10279（組件）
第2種為可以自動(dòng)對(duì)齊的視差滑動(dòng)：
▲來(lái)自「招商銀行」
組件：視差滑動(dòng)-左滑(自動(dòng)對(duì)齊、五組)
編號(hào)：10816（組件）
今天主要給大家介紹的Apple這種，就是第3種，可以連續(xù)順滑平移的視差滑動(dòng)：
▲來(lái)自「保時(shí)捷中國(guó)」
組件：視差滑動(dòng)-左滑(三組)-Apple同款
編號(hào)：11263（組件）
現(xiàn)在我們用 iPaiban Pro 黑科技編輯器就能實(shí)現(xiàn)了。該效果目前有左滑和右滑兩個(gè)方向，每個(gè)方向有兩組到九組滑動(dòng)屏數(shù)的組件可供選擇，之后還會(huì)增加其它方向，大家可以期待一下。
看著高級(jí)，但視差滑動(dòng)的排版，只要把素材圖切好，套組件制作是非常簡(jiǎn)單的，下面是詳細(xì)教程。
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com
組件：視差滑動(dòng)-左滑(三組)-Apple同款
編號(hào)：11263（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器左側(cè)「組件」按鈕，在「滑動(dòng)」-「視差滑動(dòng)」分類(lèi)中找到「視差滑動(dòng)-左滑(三組)-Apple同款」組件，或者直接搜索組件編號(hào)11263，點(diǎn)擊選擇。
第2步：上傳圖片素材
為了在滑動(dòng)時(shí)有一定的視差效果，每一組滑動(dòng)圖我們都需要進(jìn)行一定的拆解分層，一組圖片至少分為兩層，每一組的圖片需保持尺寸一致。
注意每一組圖片的尺寸保持一致即可，而不是所有圖片，這是因?yàn)樵摻M件具有可以調(diào)整顯示寬度的功能，使得一組圖片不一定只顯示一屏，靈活性較高。
比如保時(shí)捷中國(guó)的這個(gè)例子，滑動(dòng)分為4屏，但只使用了3組圖片。當(dāng)然，為了制作時(shí)簡(jiǎn)單，所有圖片尺寸一致會(huì)更好。
然后按照層級(jí)關(guān)系分別上傳分層圖片。
第3步：調(diào)整滑動(dòng)的視差效果
滑動(dòng)右側(cè)滑桿，數(shù)值越大，圖片的視差效果越明顯。
想要滑動(dòng)顯示幾屏，容器寬度就調(diào)整為幾百。
第4步：設(shè)置滑動(dòng)背景（可忽略）
在蘋(píng)果手機(jī)上，滑動(dòng)到最后繼續(xù)滑動(dòng)會(huì)露出白底影響美觀，所以我們可以使用「零高圖片」組件（編號(hào)：10224）給視差滑動(dòng)添加一個(gè)背景圖。
零高圖片尺寸與滑動(dòng)第一屏尺寸一致，上傳圖片后上移至視差滑動(dòng)上方，該圖片便成為了滑動(dòng)的背景圖。
第5步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊頁(yè)面最右側(cè)「預(yù)覽草稿」可掃碼預(yù)覽效果，效果滿(mǎn)意后繼續(xù)點(diǎn)擊「導(dǎo)入微信后臺(tái)」就能開(kāi)始導(dǎo)到公眾號(hào)了。
導(dǎo)入時(shí)使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來(lái)啦！》
掃描下方二維碼添加企業(yè)微信，回復(fù)關(guān)鍵詞「視差」，可獲取本文小米、招商銀行和保時(shí)捷中國(guó)的案例素材。
▲長(zhǎng)按掃碼識(shí)別
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開(kāi)，即可開(kāi)始注冊(cè)并使用。
新用戶(hù)在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會(huì)員體驗(yàn)權(quán)，以及22個(gè)常用必備組件的大禮包（1年）。隨禮包附贈(zèng)千元優(yōu)惠券，每單最高立降500元。
● SVG 黑科技交互排版????????
·
轉(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條）