/圖/片可/以/斜/著/滾/動(dòng)/了/
今天給大家說下關(guān)于 iPaiban Pro 黑科技編輯器更新的兩件事。
一件是模板的更新，上新了新組件。
之前編輯器有一個(gè)可以自動(dòng)平移滾動(dòng)的交互效果，我們可以選擇向左（編號(hào)：10888）、向右（編號(hào)：10889）、向上（編號(hào)：10891）或向下（編號(hào)：10890）滾動(dòng)，大家在「組件」-「自動(dòng)」-「平移」分類中可以找到。
但4個(gè)方向的滾動(dòng)效果沒想到仍不能滿足大家的需求，于是我們剛剛上線了可以斜向滾動(dòng)的交互效果，傾斜角度可以任意調(diào)整。
并且為了更好的視覺效果，斜向滾動(dòng)是一屏顯示兩張輪播圖的，看看Demo：
傾斜【25度】：
另一件是功能的更新，增加了「最近更新」模塊。
之前每次上線新組件/組合時(shí)大家可能都不知道，現(xiàn)在在「最近更新」中可以看到60天內(nèi)上線的所有組件/組合了。
當(dāng)然，有不錯(cuò)的新效果上線時(shí)還是會(huì)給大家在推文中及時(shí)推薦的，就比如今天的斜向滾動(dòng)效果，這個(gè)效果在制作素材時(shí)也有一些特殊性，大家一起看下詳細(xì)使用教程吧。
工具：iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com
組件：自動(dòng)-斜向滾動(dòng)(一屏顯示兩圖)
編號(hào)：11153（組件）第1步：選擇組件
登錄 iPaiban Pro 編輯器后，點(diǎn)擊編輯器右側(cè)「組件」按鈕，在「自動(dòng)」-「平移」分類中找到「自動(dòng)-斜向滾動(dòng)(一屏顯示兩圖)」組件，點(diǎn)擊選擇。或者直接在搜索框中搜索組件編號(hào)11153。
第2步：上傳圖片素材
圖片素材制作時(shí)需要注意一下尺寸。我們先確定輪播圖的尺寸，所有輪播圖尺寸保持一致。
背景圖尺寸由輪播圖決定：寬度為單張輪播圖寬度的2倍，高度為單張輪播圖高度+單張輪播圖寬度*3tanθ。這里θ為我們要設(shè)置的傾斜角度。
這個(gè)是最佳尺寸，大家可以根據(jù)需要自由調(diào)整，不用強(qiáng)求。大家也不必理解公式的意義，只需知道這樣可以讓效果完美呈現(xiàn)就可以了。比如如果輪播圖的寬為500px，高為300px，設(shè)置傾斜角度45度，那么背景圖的寬度應(yīng)為500*2=1000px，高度應(yīng)為300+500*3*tan45°=1800px。
圖片制作好后，點(diǎn)擊右側(cè)「換圖」按鈕上傳背景圖，點(diǎn)擊「+」號(hào)上傳所有輪播圖。
第3步：調(diào)整滾動(dòng)效果
滾動(dòng)效果由「每張圖片切換時(shí)間」和「傾斜角度」兩部分組成，大家可根據(jù)需要自由設(shè)置。
第4步：導(dǎo)入公眾號(hào)后臺(tái)
點(diǎn)擊頁面最右側(cè)「預(yù)覽草稿」可隨時(shí)預(yù)覽效果，效果滿意后點(diǎn)擊「導(dǎo)入微信后臺(tái)」就能開始導(dǎo)到公眾號(hào)了。
導(dǎo)入時(shí)使用 iPaiban Pro 小助手更方便哦，最新版本的小助手已經(jīng)支持局部導(dǎo)入，安裝教程戳：《安裝教程》，使用教程戳：《使用教程》。
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：x.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可開始注冊(cè)并使用。
新用戶在「新手禮包」可領(lǐng)取3天企業(yè)標(biāo)準(zhǔn)版會(huì)員體驗(yàn)權(quán)，以及22個(gè)常用必備組件的大禮包（1年）哦。
一個(gè)互動(dòng)
你還想要什么交互效果？
留言區(qū)聊聊
● SVG 黑科技交互排版????????
點(diǎn)個(gè)“在看”
戳沙小僧（playhudong033）
領(lǐng)取交互圖文案例庫15天會(huì)員
（含數(shù)千品牌的13000+案例）
轉(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條）