公眾號翻頁效果怎么做?

此篇文章用到了斜切式翻書SVG效果,原理類似于點擊切換圖片,但在視覺效果上模擬了翻書變化的動畫。

案例拆解篇
2023.02.16
@所有人  必讀



01
斜切式翻書SVG效果





《不懂就問》

點擊上方黃色文字跳轉??



01
創意分析

STUDY HARD


此篇推文將原本長篇文章內容濃縮成一張張圖片,并以書本的形式來呈現,需要用戶點擊之后切換圖片查看。在圖片的設計上以扁平風格為主,整體背景是暗色系,能更好突出產品圖片,讓用戶在閱讀過程中快速將目光鎖定到珠寶產品。




02
SVG效果分析

STUDY HARD


此篇文章用到了斜切式翻書SVG效果,原理類似于點擊切換圖片,但在視覺效果上模擬了翻書變化的動畫。此效果將長篇圖文內容融合為一屏展示,相較于以往的長篇累牘的呈現形式,這種形式能讓用戶視覺中心停留在此屏內容之中,并帶著好奇心,進行沉浸式閱讀,從而提高文章的留存率。


03
使用講解

STUDY HARD


當大家在做圖片排版,而內容較長時,利用此效果來展示文章是個不錯的選擇。在圖片整體設計上,可以做成書籍、報紙、便簽的展示形式,如果要在海報中放入產品圖片時,在文案部分需要精煉,整體海報的設計顏色要與產品形成反差,不要喧賓奪主,重點在于讓用戶關注到宣傳推廣的產品本身。


此效果適合科技、電商、彩妝、珠寶、服裝行業用來展示產品。


在135編輯器首頁,選擇左側菜單欄【SVG編輯器】進入。



進入網頁后,選擇【互動效果】—素材—斜切式翻書效果,ID:238,詳細制作教程如下:


教程在這里:點擊查看



02
左右掉落式切換圖片





《明天見?!?/span>

點擊上方黃色文字跳轉閱讀


01
創意分析

STUDY HARD


這篇推文是以二十四節氣為主題,以春夏秋冬為分界點,每一個節氣海報圖則對應一個珠寶產品。通過點擊切換節氣日歷的想法來做年度產品總結,既展示了產品,又與年末主題相契合,與傳統的年度總結文章形式相比較而言構思更巧妙。




02
SVG效果分析

STUDY HARD


推文中使用到的效果為左右掉落切換圖片,在點擊切換過程中圖片會朝左右兩側下方逐漸消失,模擬撕紙的視覺效果。在這篇推文中,將二十四節氣以春夏秋冬為時間分界線做了4組左右掉落式切換圖片的SVG,并且以日歷的形式來呈現,讓排版變得高級美觀,將原本單一普通的產品展示變得新穎有趣,給用戶留下深刻印象。




03
使用講解

STUDY HARD


此款SVG適合大家用來做創意推文,無論是單獨作為展示效果,還是放在推文中與其他內容組合在一起,在視覺呈現上都很棒。各行業都可以使用,在圖片制作上視覺風格要保持一致,最好做成日歷或報紙的形式,才能與此效果的動畫相融合。


在135編輯器首頁,選擇左側菜單欄【SVG編輯器】進入。



進入網頁后,選擇【互動效果】—素材—左右掉落式切換圖片,ID:245,詳細制作教程如下:


教程在這里:點擊查看







03
圖文依次停頓式展開




《好長長長...》

點擊上方黃色文字跳轉閱讀



01
創意分析

STUDY HARD


一看到這篇推文中的效果,我想大家應該都不陌生了吧,沒錯,這就是《GQ紅了》爆款推文中的同款效果。在這篇文章中,以“粉色是什么”為主題,加上多款動態的文字圖片進行組合展示,對粉色的概念做了進一步解釋,一步步地引導用戶往下閱讀推文,再在文章末尾處放上自己的新產品進行宣傳推廣,與直接展示產品圖片相比,讓用戶更易接受,創意十足。



02
SVG效果分析

STUDY HARD


此款效果叫做圖文依次停頓式展開,同屬于點擊展開效果的隊列,但是它相對于傳統的點擊展開效果來說,圖文依次停頓效果能按照一定的動畫時長,有節奏的展開,符合用戶閱讀習慣,讓用戶跟隨SVG的步調進行沉浸式閱讀。

03
使用講解

STUDY HARD


此款效果已經被很多行業采用,普適性強,比如政務行業、科技行業、彩妝行業等。唯一要注意的是首先主題要明確,全篇的gif文字圖都應該圍繞主題來展開,其次就是在圖片設計上,要以多種字體、動效結合,錯落排列,才能呈現出好的效果。


在135編輯器首頁,選擇左側菜單欄【SVG編輯器】進入。



進入網頁后,選擇【互動效果】—組合—圖片依次停頓式展開效果,ID:244,詳細制作教程如下:


教程在這里:點擊查看








文章申明:本文章轉載自互聯網公開渠道,如有侵權請聯系我們刪除
文章評價
登錄后可以評論
立即登錄
分享到
2020精品自拍视频曝光_久久最新地址免费_紧身裙教师中文字幕在线一区_免费国产一级特黄aa大