這是3D圖文嗎！？立體感超強的視差上滑排版教程來啦
打開圖文，向上滑動時感覺像是進入了3D空間。
不少小伙伴都覺得這個排版效果很有意思，上滑試試：
*素材來自廣和通Fibocom
組件：立體視差滑動-上滑
編號：11346（組件）
組件：遮罩
編號：10829（組件）
單純的立體視差上滑排版，大家使用iPaiban Pro 編輯器中的「立體視差滑動-上滑」組件（編號：11346）即可實現。
上方效果的巧妙之處，就在于給立體視差上滑覆蓋了一層遮罩，使得原本在背景上方滑動的圖片好像從底面跑出來的，立體空間感馬上就增強了。
▲遮罩圖設計
不加遮罩（左）和加遮罩（右）的效果對比：
如果上滑的內容大家不想局限于純圖片，則可以使用「立體視差滑動 - 上滑組合」（編號：11353），使用它可以在上滑的內容中嵌套各種各樣的交互效果。
比如嵌套自動輪播：
*素材來自中電光谷《中部崛起正當時，來感受園區的脈動》
組合：立體視差滑動-上滑組合
編號：11353（組合）
組件：雙層banner-前景輪播，背景漸現
編號：10865（組件）
下面以本文第1個效果為例，一起看下制作教程吧。
詳細教程：
工具：iPaiban Pro 黑科技編輯器，網址：SVG.iPaiban.com
組件：立體視差滑動-上滑
編號：11346（組件）
組件：遮罩
編號：10829（組件）
第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點擊編輯器左側「組件」按鈕，在「滑動」分類中找到「立體視差滑動-上滑」組件，或者直接搜索組件編號11346，點擊選擇。
第2步：上傳圖片素材
點擊右側「換圖」按鈕上傳單張背景圖，點擊右側「+」按鈕按順序批量上傳滑動圖。滑動圖的圖片寬度與背景圖保持一致。
第3步：調整效果參數
設置「圖片方向」為左右交替，「初始高度增量」保持默認值0。
第4步：設置「遮罩」組件并打開「全局寬度」
①點擊編輯器左側「組件」按鈕，在「特殊」分類中找到「遮罩」組件，或者直接搜索組件編號10829，點擊選擇。
②點擊右側「換圖」按鈕，上傳遮罩圖。遮罩圖與立體視差組件的背景圖尺寸一致。
③打開「全局寬度」，統一立體視差和遮罩圖的寬度。
第5步：導入公眾號后臺
點擊頁面最右側「預覽草稿」可隨時預覽效果，盡量使用手機掃碼預覽。
調整效果滿意后點擊「同步至微信后臺」就同步到自己的公眾號就可以了。
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）