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