打分、劃重點(diǎn)、字幕滾動……這種巧妙的模擬式排版怎么做的？
要是咱們希望制作出的圖文不復(fù)雜但又有意思，不妨轉(zhuǎn)換一下思路，把生活中常見的一些操作搬進(jìn)給圖文里。
但想要在圖文中通過排版模擬日常生活中習(xí)以為常的效果，會不會很難哇？
今天給大家舉3個有趣好玩的小例子就知道了，分別為：打分、劃重點(diǎn)、字幕滾動
3個案例分別來自用我要WhatYouNeed、戴爾、我是FARMER BOB 3個公眾號。
下面一起簡單拆解一下。
一
模擬評分
*素材來自我要WhatYouNeed《好人微瑕，我們都做過的26件壞事。》
將前景中的星星區(qū)域做成鏤空的，背景中設(shè)計填充星星的顏色，這樣「背景右滑」就可以讓用戶在微信文章中為不同的行為打分。
素材如下：
該效果可使用 iPaiban Pro 黑科技編輯器中的「雙層滑動-背景右滑」組件（編號：10140）制作。
前景和背景圖片上傳如下：
想要實(shí)現(xiàn)同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：
組件：雙層滑動-背景右滑
編號：10140（組件）
二
模擬劃重點(diǎn)
*素材來自戴爾《Buff疊滿，戴爾官網(wǎng)福利真的強(qiáng)！》
換個思路，還是雙層圖片，這次是背景不動，前景滑動。
在前景的重要文字處做鏤空效果，在背景圖的相應(yīng)設(shè)計彩色的顏色條，這樣在滑動過程中前景圖鏤空處就有了色彩的變化。
素材如下：
該效果使用 iPaiban Pro 黑科技編輯器中的「雙層滑動-前景左滑」組件（編號：10018）即可制作。
選擇組件后，在頁面右側(cè)依次點(diǎn)擊「換圖」和「+」號上傳準(zhǔn)備好的圖片素材。滑動圖尺寸和底圖保持一致，本文案例中的素材上傳效果如下：
想要實(shí)現(xiàn)同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：
組件：雙層滑動-前景左滑
編號：10018（組件）
三
模擬電影結(jié)尾字幕滾動
*素材來自我是FARMER BOB《新品｜以搖滾之名，與BOB一起高唱浪漫的詩》
自動向上滾動播放不同的名字。簡單的效果賦予了推文如同電影般的儀式感。
這個效果由3層圖片組成：背景層、中間層和前景層。
前景層的滾動圖是多張圖拼接而成的，需要使用 iPaiban Pro 黑科技編輯器中的「自動-向上滾動條」組件（編號：10891），支持設(shè)置滾動時間。
固定不動的背景和前景圖，分別使用「零高圖片」組件（編號：10224）和「遮罩」組件（編號：10829）進(jìn)行配置。
3個組件的放置順序如下，然后分別上傳準(zhǔn)備好的圖片素材即可。每層圖片尺寸都保持一致。
想要實(shí)現(xiàn)同款效果可以在編輯器（SVG.iPaiban.com）搜索使用：
組件：自動-向上滾動條
編號：10891（組件）
組件：零高圖片 | 萬能背景圖
編號：10224（組件）
組件：遮罩
編號：10829（組件）
制作SVG交互圖文認(rèn)準(zhǔn) iPaiban Pro 黑科技編輯器，網(wǎng)址：SVG.iPaiban.com，復(fù)制網(wǎng)址在 PC 端 Chrome（谷歌）瀏覽器打開，即可注冊，編輯器所有組件/組合現(xiàn)已全部支持免費(fèi)試用了。
轉(zhuǎn)載請在文章開頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請至數(shù)英微信公眾號(ID: digitaling) 后臺授權(quán)，侵權(quán)必究。
評論
評論
推薦評論
暫無評論哦，快來評論一下吧！
全部評論（0條）