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

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

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

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

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

點擊查看路易威登原文

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

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

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

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

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

我們在公眾號后臺編輯頁面，添加視頻號保存即可。

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

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

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

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

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

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

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

我們在展開里添加無縫圖+頂層背景圖固定，中間層滑動組件ID：768。

依次添加頂層圖、背景圖以及滑動圖，完成素材添加后記得點擊右上角的「完成」

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

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

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

點我下載好用的135插件

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

怎么樣

今天的SVG效果還不錯吧

相信聰明的你

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

學(xué)會了就快動手試試吧

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

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