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

最近不少朋友找我吐槽，說自己上班上久了不僅自己一身班味，連做推文也是一股淡淡的無力感，好久沒有做出讓人眼前一亮的推文了。

你是否也存在推文排版死氣沉沉，效果感覺土土的，不夠洋氣連老板都沒有看下去的欲望...

既然不知道怎么做，那相信大牌的眼光，使用同款大牌SVG拯救我們的「土」推文！

今天三兒就給大家?guī)鞮V的滑動(dòng)展開效果，讓滑動(dòng)也玩出了新花樣??

點(diǎn)擊查看路易威登原文

大家如果看了原文會(huì)發(fā)現(xiàn)，這篇文章開頭用了一個(gè)大家常問的gif視頻號(hào)效果，向下滑動(dòng)又疊加了左/右滑動(dòng)展開的效果組件，在展開中還嵌套了三層左滑居中的效果。

那么今天就跟著三兒一起來學(xué)習(xí)這個(gè)效果吧。

注：本文素材來源均來自路易威登，僅做教學(xué)使用。

在135編輯器左側(cè)找到「SVG互動(dòng)效果」進(jìn)入svg編輯器頁面，我們先在互動(dòng)效果中搜索「視頻號(hào)」這個(gè)效果（組件ID76）

將組件添加至編輯區(qū)域，然后我們需要到微信公眾號(hào)后臺(tái)生成一個(gè)視頻號(hào)鏈接。

我們?cè)诠娞?hào)后臺(tái)編輯頁面，添加視頻號(hào)保存即可。

保存后在「草稿箱」點(diǎn)擊標(biāo)題復(fù)制鏈接即可。

我們把鏈接粘貼至「快速獲取代碼」組件將自動(dòng)提取視頻號(hào)內(nèi)容，然后添加一個(gè)封面圖即可。

這樣我們第一個(gè)含有g(shù)if圖的視頻號(hào)完成了，然后我們制作左/右滑動(dòng)展開的效果。

在「互動(dòng)效果」中搜索「橫向滑動(dòng)封面圖展開 組件ID：909」

我們上傳滑動(dòng)封面圖，選擇對(duì)應(yīng)的滑動(dòng)方向，當(dāng)然你也可以設(shè)置滑動(dòng)時(shí)間與展開的時(shí)長。

之后我們就是添加展開后的內(nèi)容，原文是搭配了一個(gè)無縫圖+三層滑動(dòng)，具體添加什么效果要根據(jù)我們實(shí)際的素材來，可以變化不一定非要一模一樣。

點(diǎn)擊「編輯展開內(nèi)容」添加展開內(nèi)容。

我們?cè)谡归_里添加無縫圖+頂層背景圖固定，中間層滑動(dòng)組件ID：768。

依次添加頂層圖、背景圖以及滑動(dòng)圖，完成素材添加后記得點(diǎn)擊右上角的「完成」

后面就是重復(fù)上述操作，這樣我們就完成了一篇高級(jí)感十足的推文排版。

完成所有內(nèi)容后，可以選擇編輯器右上角的「同步」就能同步到授權(quán)公眾號(hào)后臺(tái)，只有公眾號(hào)授權(quán)給135后才可以使用同步功能。

如果沒有授權(quán)也可以下載135插件，通過插件同步到微信公眾號(hào)后臺(tái)，只有谷歌瀏覽器安裝了插件后才可以使用插件同步。

點(diǎn)我下載好用的135插件

如果需要將做好的內(nèi)容放進(jìn)135編輯器編輯頁中，選擇「導(dǎo)出」-「復(fù)制代碼到135編輯器」即可

怎么樣

今天的SVG效果還不錯(cuò)吧

相信聰明的你

已經(jīng)學(xué)會(huì)了

學(xué)會(huì)了就快動(dòng)手試試吧

還有什么想看想學(xué)的技巧/效果

記得在評(píng)論區(qū)留言告訴我喔~