SVG特效公眾號三層滑動怎么設(shè)置?
本文詳細(xì)介紹了如何利用135插件制作三層上滑SVG特效，通過固定背景圖和頂層圖，中間層滑動的方式，打造出獨(dú)特的視覺效果。文章從采集圖片、分析推文結(jié)構(gòu)開始，逐步指導(dǎo)讀者如何進(jìn)入SVG編輯器、上傳素材圖，并最終導(dǎo)出應(yīng)用到公眾號推文中。
朋友們大家好，我是三兒。
最近有朋友問三兒：
“最近看到一個(gè)滑動很神奇，視覺效果絕了我貧瘠的語言無法描繪請看VCR（視頻錄制轉(zhuǎn)GIF）??”
??查看原文《倒計(jì)時(shí)！流浪地球啟程！》
這時(shí)候有朋友會說：這個(gè)滑動有啥難的，這看起來不就像是一個(gè)雙層滑動嘛，三兒故弄玄虛
真的是這樣嗎？
這里我們借助135插件，獲取原文圖片進(jìn)行研究。
圖片下載后，我們就能比較清晰地看到整篇推文的結(jié)構(gòu)了。
“你這我也看不出個(gè)啥呀？”
怎么樣現(xiàn)在是不是直觀地看到了這篇文章的結(jié)構(gòu)？
沒錯(cuò)這篇文章，并不是一個(gè)簡單的雙層滑動，而是一個(gè)背景圖固定、頂層圖固定，中間層滑動的三層上滑。
如果我們想要制作這樣的效果應(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è)地方頂部沒有內(nèi)容顯示，可以只上傳背景圖不上傳頂層圖。
如果你覺得高度顯示太少，可以自定義高度。
后面我們就是不斷地上傳背景圖+頂層圖即可。
完成后我們可以選擇【導(dǎo)出】把內(nèi)容復(fù)制到135編輯器或是微信公眾號后臺，或是直接通過保存同步到微信公眾號后臺。
三兒說：
當(dāng)然三層上滑你不僅可以豎向滑動，也可以橫向滑動（我們在上傳圖片素材時(shí)提前進(jìn)行旋轉(zhuǎn)）再搭配好的設(shè)計(jì)、創(chuàng)意、文案內(nèi)容就能夠讓你的作品脫穎而出，閃耀星空。
相信聰明的你
已經(jīng)學(xué)會了這個(gè)效果了
眼睛學(xué)會了記得動手操練下喔
如果你還有什么想看想學(xué)的
記得在評論區(qū)留言哦
立即登錄
