Apple、小米、招商銀行、保時捷的這種視差滑動，怎么做的？
什么是視差滑動？它是指讓多層圖片以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。
視差滑動是一個總概念，它其實可以細分出很多不同的效果，之前給大家介紹過兩種，今天干脆放在一起體驗對比一下，更能看出其中的區別。
每個效果下方都有對應編輯器組件和詳細教程，文末附有案例素材的下載方式。
第1種為可以移入移出的前景視差滑動：
▲來自「小米手機」
組件：前景視差滑動-左滑(移入)
編號：10279（組件）
第2種為可以自動對齊的視差滑動：
▲來自「招商銀行」
組件：視差滑動-左滑(自動對齊、五組)
編號：10816（組件）
今天主要給大家介紹的Apple這種，就是第3種，可以連續順滑平移的視差滑動：
▲來自「保時捷中國」
組件：視差滑動-左滑(三組)-Apple同款
編號：11263（組件）
現在我們用 iPaiban Pro 黑科技編輯器就能實現了。該效果目前有左滑和右滑兩個方向，每個方向有兩組到九組滑動屏數的組件可供選擇，之后還會增加其它方向，大家可以期待一下。
看著高級，但視差滑動的排版，只要把素材圖切好，套組件制作是非常簡單的，下面是詳細教程。
工具：iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com
組件：視差滑動-左滑(三組)-Apple同款
編號：11263（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「滑動」-「視差滑動」分類中找到「視差滑動-左滑(三組)-Apple同款」組件，或者直接搜索組件編號11263，點擊選擇。
第2步：上傳圖片素材
為了在滑動時有一定的視差效果，每一組滑動圖我們都需要進行一定的拆解分層，一組圖片至少分為兩層，每一組的圖片需保持尺寸一致。
注意每一組圖片的尺寸保持一致即可，而不是所有圖片，這是因為該組件具有可以調整顯示寬度的功能，使得一組圖片不一定只顯示一屏，靈活性較高。
比如保時捷中國的這個例子，滑動分為4屏，但只使用了3組圖片。當然，為了制作時簡單，所有圖片尺寸一致會更好。
然后按照層級關系分別上傳分層圖片。
第3步：調整滑動的視差效果
滑動右側滑桿，數值越大，圖片的視差效果越明顯。
想要滑動顯示幾屏，容器寬度就調整為幾百。
第4步：設置滑動背景（可忽略）
在蘋果手機上，滑動到最后繼續滑動會露出白底影響美觀，所以我們可以使用「零高圖片」組件（編號：10224）給視差滑動添加一個背景圖。
零高圖片尺寸與滑動第一屏尺寸一致，上傳圖片后上移至視差滑動上方，該圖片便成為了滑動的背景圖。
第5步：導入公眾號后臺
點擊頁面最右側「預覽草稿」可掃碼預覽效果，效果滿意后繼續點擊「導入微信后臺」就能開始導到公眾號了。
導入時使用 iPaiban Pro 小助手更方便哦，最新v2.0版本的小助手還支持一鍵打包下載圖文圖片素材，非常方便，安裝教程戳：《iPaiban Pro小助手v2.0來啦！》
掃描下方二維碼添加企業微信，回復關鍵詞「視差」，可獲取本文小米、招商銀行和保時捷中國的案例素材。
▲長按掃碼識別
制作SVG交互圖文認準 iPaiban Pro 黑科技編輯器，網址：x.iPaiban.com，復制網址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊并使用。
新用戶在「新手禮包」可領取3天企業標準版會員體驗權，以及22個常用必備組件的大禮包（1年）。隨禮包附贈千元優惠券，每單最高立降500元。
● SVG 黑科技交互排版????????
·
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）