多層滑動推文設(shè)計教程：品牌案例解析+SVG實(shí)現(xiàn)技巧
深度解析最高人民法院、茶理宜世、CoCo都可等品牌的多層滑動推文設(shè)計案例，揭秘三層滑動、小元素移入、豎向3D斜切等SVG交互效果實(shí)現(xiàn)方法，附組件ID及素材要求，助你打造高互動性創(chuàng)意推文，提升品牌內(nèi)容吸引力！
近期又有什么有趣的推文呢？
之前三兒發(fā)現(xiàn)大家很喜歡
雙（三）層滑動
搭配畫面可玩性很多
最近三兒又發(fā)現(xiàn)一些推文
在雙（三）層滑動的基礎(chǔ)上
又有些新的玩法
一起來看看吧
最高人民法院利用小元素自動移入+雙層滑動回顧與總結(jié)人民法院案例庫上線一年來取得的成就，本文有兩個特點(diǎn)，一是小元素的自動移入搭配法官人物步行并不突兀，二是法官（固定元素）并沒有在常規(guī)的居中而是文章側(cè)邊，能作為文章一個小小吸睛亮點(diǎn)但并不會喧賓奪主，弱化本文主題內(nèi)容。
組件：三層滑動（小元素移入）+頂層底層上下滑動
組件ID：988
組件搜索：SVG編輯器內(nèi)搜索
效果答疑
疑問一：原文是雙層滑動為什么你要用三層滑動？
答疑：三層滑動可以向下兼容雙層滑動，我們頂層可以不放入圖片或者上傳同滑動圖尺寸的透明圖就行
疑問二：小元素素材有什么要求嗎？
小元素的寬度需要與滑動圖的寬度一致，高度盡量不超過第一張滑動圖的高度，同時小元素的位置需要提前確定,這樣疊上去才能確保小元素一直固定在滑動圖的左側(cè)。
元素圖示例
部分滑動圖示例
茶理宜世就是經(jīng)典的三層滑動，中間層（小元素）固定、底層和頂層滑動，這個和以往不同的點(diǎn)在于有一個自動移入的效果，同時它的小元素恰好就是常規(guī)的居中位置，更多巧思還是在設(shè)計上，比如適當(dāng)?shù)捻攲訄D有遮擋實(shí)現(xiàn)「穿透」效果，三層滑動效果簡單但出圈非常推薦大家在推文中使用。
組件：三層滑動（小元素移入）+頂層底層上下滑動
組件ID：988
組件搜索：SVG編輯器內(nèi)搜索
都可這篇并不是常規(guī)三層滑動，而是使用豎向3D斜切滑動。頂部圖是都可的杯子，通過設(shè)置傾斜角度來實(shí)現(xiàn)滑動圖片滑進(jìn)杯中，趣味性拉滿，推文也更顯得活潑有趣。根據(jù)這個案例我們還可以拓展創(chuàng)意思路，例如頂層圖是垃圾桶我們滑入各類垃圾或是頂層圖是碎紙機(jī)我們粉碎各種謠言或是壞心情等等，該效果可搭配的創(chuàng)意頗多等待各位去探尋。
組件：三層滑動（豎向3d斜切）+點(diǎn)擊不可彈出
組件ID：558
以上就是今天
三兒給大家?guī)怼富沟娜啃Ч?/span>
大家還有什么想看想學(xué)的
記得在評論區(qū)留言噢
立即登錄
