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