公眾號(hào)翻頁效果怎么做？
此篇文章用到了斜切式翻書SVG效果，原理類似于點(diǎn)擊切換圖片，但在視覺效果上模擬了翻書變化的動(dòng)畫。
點(diǎn)擊上方黃色文字跳轉(zhuǎn)??
此篇推文將原本長(zhǎng)篇文章內(nèi)容濃縮成一張張圖片，并以書本的形式來呈現(xiàn)，需要用戶點(diǎn)擊之后切換圖片查看。在圖片的設(shè)計(jì)上以扁平風(fēng)格為主，整體背景是暗色系，能更好突出產(chǎn)品圖片，讓用戶在閱讀過程中快速將目光鎖定到珠寶產(chǎn)品。
此篇文章用到了斜切式翻書SVG效果，原理類似于點(diǎn)擊切換圖片，但在視覺效果上模擬了翻書變化的動(dòng)畫。此效果將長(zhǎng)篇圖文內(nèi)容融合為一屏展示，相較于以往的長(zhǎng)篇累牘的呈現(xiàn)形式，這種形式能讓用戶視覺中心停留在此屏內(nèi)容之中，并帶著好奇心，進(jìn)行沉浸式閱讀，從而提高文章的留存率。
當(dāng)大家在做圖片排版，而內(nèi)容較長(zhǎng)時(shí)，利用此效果來展示文章是個(gè)不錯(cuò)的選擇。在圖片整體設(shè)計(jì)上，可以做成書籍、報(bào)紙、便簽的展示形式，如果要在海報(bào)中放入產(chǎn)品圖片時(shí)，在文案部分需要精煉，整體海報(bào)的設(shè)計(jì)顏色要與產(chǎn)品形成反差，不要喧賓奪主，重點(diǎn)在于讓用戶關(guān)注到宣傳推廣的產(chǎn)品本身。
此效果適合科技、電商、彩妝、珠寶、服裝行業(yè)用來展示產(chǎn)品。
在135編輯器首頁，選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。
進(jìn)入網(wǎng)頁后，選擇【互動(dòng)效果】—素材—斜切式翻書效果，ID：238，詳細(xì)制作教程如下：
教程在這里：點(diǎn)擊查看
點(diǎn)擊上方黃色文字跳轉(zhuǎn)閱讀
這篇推文是以二十四節(jié)氣為主題，以春夏秋冬為分界點(diǎn)，每一個(gè)節(jié)氣海報(bào)圖則對(duì)應(yīng)一個(gè)珠寶產(chǎn)品。通過點(diǎn)擊切換節(jié)氣日歷的想法來做年度產(chǎn)品總結(jié)，既展示了產(chǎn)品，又與年末主題相契合，與傳統(tǒng)的年度總結(jié)文章形式相比較而言構(gòu)思更巧妙。
推文中使用到的效果為左右掉落切換圖片，在點(diǎn)擊切換過程中圖片會(huì)朝左右兩側(cè)下方逐漸消失，模擬撕紙的視覺效果。在這篇推文中，將二十四節(jié)氣以春夏秋冬為時(shí)間分界線做了4組左右掉落式切換圖片的SVG，并且以日歷的形式來呈現(xiàn)，讓排版變得高級(jí)美觀，將原本單一普通的產(chǎn)品展示變得新穎有趣，給用戶留下深刻印象。
此款SVG適合大家用來做創(chuàng)意推文，無論是單獨(dú)作為展示效果，還是放在推文中與其他內(nèi)容組合在一起，在視覺呈現(xiàn)上都很棒。各行業(yè)都可以使用，在圖片制作上視覺風(fēng)格要保持一致，最好做成日歷或報(bào)紙的形式，才能與此效果的動(dòng)畫相融合。
在135編輯器首頁，選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。
進(jìn)入網(wǎng)頁后，選擇【互動(dòng)效果】—素材—左右掉落式切換圖片，ID：245，詳細(xì)制作教程如下：
教程在這里：點(diǎn)擊查看
點(diǎn)擊上方黃色文字跳轉(zhuǎn)閱讀
一看到這篇推文中的效果，我想大家應(yīng)該都不陌生了吧，沒錯(cuò)，這就是《GQ紅了》爆款推文中的同款效果。在這篇文章中，以“粉色是什么”為主題，加上多款動(dòng)態(tài)的文字圖片進(jìn)行組合展示，對(duì)粉色的概念做了進(jìn)一步解釋，一步步地引導(dǎo)用戶往下閱讀推文，再在文章末尾處放上自己的新產(chǎn)品進(jìn)行宣傳推廣，與直接展示產(chǎn)品圖片相比，讓用戶更易接受，創(chuàng)意十足。
此款效果叫做圖文依次停頓式展開，同屬于點(diǎn)擊展開效果的隊(duì)列，但是它相對(duì)于傳統(tǒng)的點(diǎn)擊展開效果來說，圖文依次停頓效果能按照一定的動(dòng)畫時(shí)長(zhǎng)，有節(jié)奏的展開，符合用戶閱讀習(xí)慣，讓用戶跟隨SVG的步調(diào)進(jìn)行沉浸式閱讀。
此款效果已經(jīng)被很多行業(yè)采用，普適性強(qiáng)，比如政務(wù)行業(yè)、科技行業(yè)、彩妝行業(yè)等。唯一要注意的是首先主題要明確，全篇的gif文字圖都應(yīng)該圍繞主題來展開，其次就是在圖片設(shè)計(jì)上，要以多種字體、動(dòng)效結(jié)合，錯(cuò)落排列，才能呈現(xiàn)出好的效果。
在135編輯器首頁，選擇左側(cè)菜單欄【SVG編輯器】進(jìn)入。
進(jìn)入網(wǎng)頁后，選擇【互動(dòng)效果】—組合—圖片依次停頓式展開效果，ID：244，詳細(xì)制作教程如下：
教程在這里：點(diǎn)擊查看
立即登錄
