朋友們大家好，我是三兒。

最近有朋友問(wèn)三兒：

“最近看到一個(gè)滑動(dòng)很神奇，視覺(jué)效果絕了我貧瘠的語(yǔ)言無(wú)法描繪請(qǐng)看VCR（視頻錄制轉(zhuǎn)GIF）??”

??查看原文《倒計(jì)時(shí)！流浪地球啟程！》

這時(shí)候有朋友會(huì)說(shuō)：這個(gè)滑動(dòng)有啥難的，這看起來(lái)不就像是一個(gè)雙層滑動(dòng)嘛，三兒故弄玄虛

真的是這樣嗎？

這里我們借助135插件，獲取原文圖片進(jìn)行研究。

圖片下載后，我們就能比較清晰地看到整篇推文的結(jié)構(gòu)了。

“你這我也看不出個(gè)啥呀？”

怎么樣現(xiàn)在是不是直觀地看到了這篇文章的結(jié)構(gòu)？

沒(méi)錯(cuò)這篇文章，并不是一個(gè)簡(jiǎn)單的雙層滑動(dòng)，而是一個(gè)背景圖固定、頂層圖固定，中間層滑動(dòng)的三層上滑。

如果我們想要制作這樣的效果應(yīng)該如何制作呢？

在135編輯器左側(cè)找到SVG編輯器，點(diǎn)擊【進(jìn)入SVG編輯器】或是直接搜索三層上滑或組件ID：31

三兒這里選擇非居中的三層上滑，點(diǎn)擊進(jìn)入SVG編輯器。

進(jìn)入SVG編輯器后，我們要養(yǎng)成習(xí)慣先看素材要求，這樣可以減少許多不必要的麻煩。

我們這個(gè)案例【地球】是一直固定不變的，所以地球這個(gè)素材就是我們的固定圖。

之后我們就根據(jù)我們的素材內(nèi)容，上傳背景圖和頂層圖。

注意：如果你某個(gè)地方頂部沒(méi)有內(nèi)容顯示，可以只上傳背景圖不上傳頂層圖。

如果你覺(jué)得高度顯示太少，可以自定義高度。

后面我們就是不斷地上傳背景圖+頂層圖即可。

完成后我們可以選擇【導(dǎo)出】把內(nèi)容復(fù)制到135編輯器或是微信公眾號(hào)后臺(tái)，或是直接通過(guò)保存同步到微信公眾號(hào)后臺(tái)。

相信聰明的你

已經(jīng)學(xué)會(huì)了這個(gè)效果了

眼睛學(xué)會(huì)了記得動(dòng)手操練下喔

如果你還有什么想看想學(xué)的

記得在評(píng)論區(qū)留言哦