武漢大學、成都發布都在用的三層滑動SVG，怎么實現？
深入剖析武漢大學和成都發布三層滑動SVG效果，詳細介紹了三層滑動SVG的實現方法和操作步驟，從SVG組件的選擇到圖片素材的上傳，再到最終的公眾號后臺導入，一步步引導你掌握這一前沿的交互設計技巧。
說到滑動SVG效果，大家應該都不陌生，算是基礎的SVG效果之一了，但今天三兒不講我們常見的單層滑動和雙層滑動，而是向大家介紹三層滑動的玩法，我用武漢大學和成都發布的推文作為案例，帶你們看看三層上滑效果和推文能碰撞出怎樣的火花吧！
（來自武漢大學公眾號）
這篇武大的文章圍繞“我能成為怎樣的武大人”的主題展開，在內容呈現上，他們采用了非常新穎的方式，即利用條漫+三層滑動的交互效果進行展示，讓用戶通過一邊滑動櫻花，一邊感受武大學子們在各個領域的風采，精致的設計搭配上振奮人心的文案，傳遞了武大學子們點燃理想報效祖國的滿腔熱忱，能引起大家強烈的共鳴。
本文所用到的SVG組件為三層上滑，ID:31，此組件可以達到穿插的視覺效果。除了武漢大學以外，成都發布也有用到此效果做創意。
成都發布這篇推文利用三層滑動的SVG效果與長圖結合，通過流浪地球的概念引入，讓讀者跟隨可滑動的地球了解從古至今在成都的創造和發明，整體呈現出高級、炫酷的感覺。
（來自成都發布公眾號）
在135編輯器頁面左側選擇【SVG編輯器】——【進入SVG編輯器】，在互動效果中搜索ID:31，將該效果放在編輯頁面。
在這里我以武漢大學的推文作為示例進行操作講解。按照組件要求上傳對應的圖片，這里需要上傳三層圖片，中間固定層、頂層滑動圖、背景圖，在這篇推文中，櫻花元素為中間固定層，圖片為PNG格式。
頂層圖以及背景圖，需要切割為多張圖片，按照頂層圖、背景圖的順序依次上傳。
在調整組件展示的高度時，可以選擇【自定義高度】，拖拽進度條進行高度調整。
組件設置完成后，點擊右上角的【同步】【導出】，即可導入到公眾號后臺。
以上就是三兒分享的全部內容了
如果覺得還不錯
記得點贊+在看哦
如果你還有什么想看想學的
歡迎在評論區留言哦
*以上所涉及的素材僅供學習交流使用，侵聯刪
立即登錄
