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

最近有朋友問三兒：

“最近看到一個滑動很神奇，視覺效果絕了我貧瘠的語言無法描繪請看VCR（視頻錄制轉(zhuǎn)GIF）??”

??查看原文《倒計時！流浪地球啟程！》

這時候有朋友會說：這個滑動有啥難的，這看起來不就像是一個雙層滑動嘛，三兒故弄玄虛

真的是這樣嗎？

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

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

“你這我也看不出個啥呀？”

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

沒錯這篇文章，并不是一個簡單的雙層滑動，而是一個背景圖固定、頂層圖固定，中間層滑動的三層上滑。

如果我們想要制作這樣的效果應該如何制作呢？

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

三兒這里選擇非居中的三層上滑，點擊進入SVG編輯器。

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

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

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

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

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

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

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

相信聰明的你

已經(jīng)學會了這個效果了

眼睛學會了記得動手操練下喔

如果你還有什么想看想學的

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