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