嘿，胖友們大家好呀，我是三兒！

這兩天各大官媒好像約定好的一樣，紛紛開始朝著SVG創(chuàng)意文章進(jìn)軍，先是人民日報《點(diǎn)亮武漢》的橫空出世，打響了這場SVG角逐的第一槍，隨后新華網(wǎng)、人民日報、人民網(wǎng)紛紛出手，大家是你來我往，好不熱鬧！

然鵝這波操作徹底看傻了廣大新媒體小編，這到底是是咋做的？我也想做??！于是紛紛找到了三兒，讓三兒出一波最近大火的SVG教程。

誒，問我那你們可算是找對人了！經(jīng)過三兒縝密的分析，認(rèn)真的推理，發(fā)現(xiàn)這個推文也太簡單了吧~

今天，三兒就來為你們揭秘人民網(wǎng)公眾號的點(diǎn)擊展開卷軸的效果到底如何實(shí)現(xiàn)吧！

話不多說，教程來咯！

在開始教程之前，我們先來看一下這篇文章的效果。

怎么樣，是不是超級炫酷！那這種炫酷的SVG在135編輯器中該如何實(shí)現(xiàn)呢？

這個簡單，在135編輯器搜索樣式『卷軸』或搜索樣式ID『98461』即可收藏使用！

先說說為什么會使用卷軸這種展現(xiàn)形式，就拿人民網(wǎng)的這篇文章距離，文章內(nèi)容主要是講2020年兩會的政府工作報告內(nèi)容，用長圖的形式展示，比純文字更便于閱讀，而且加上卷軸徐徐展開的效果，給人耳目一新的感覺。

了解完了這些，我們就來看看該如何使用這個樣式吧！

1、卷軸內(nèi)要求放置圖片，圖片的大小不得超過10M，如果提示單張圖過大，需要將圖片裁剪為多張圖片進(jìn)上傳。

還可以在文章中放置GIF圖片哦，三兒建議GIF圖片不宜過大，控制在5M以內(nèi)，避免用戶加載時間過長造成不好的閱讀體驗。

2.使用此樣式，需要使用保存同步功能，將編輯好的文章直接同步至微信后臺，不然可能會導(dǎo)致SVG樣式失效。

要修改這個樣式中的圖片，我們可以利用編輯器專業(yè)版進(jìn)行操作，非常簡單！

首先先將編輯器切換至專業(yè)版，點(diǎn)擊右側(cè)『更多功能』，在彈出的菜單中選擇『切換專業(yè)版』，即可將編輯器切換為專業(yè)版。

PS：要調(diào)整SVG樣式，必須要使用專業(yè)版菜單欄才能編輯。

1.將樣式插入至編輯器中，點(diǎn)擊樣式，在彈出的菜單欄中，點(diǎn)擊『動畫』按鈕。

PS：這里需要注意的是，點(diǎn)擊樣式后才會彈出菜單欄！另外，只有SVG樣式才會顯示『動畫』按鈕，其余樣式均不會出現(xiàn)『動畫』按鈕。

2.在SVG動畫設(shè)置中，我們可以點(diǎn)擊『圖片上傳』按鈕，將樣式內(nèi)的圖片進(jìn)行更換。

這里我們需要了解的是，卷軸頂部和卷軸底部都是一開始就展現(xiàn)在讀者面前的。中間的部分是點(diǎn)擊以后才會緩緩展開。

在動畫設(shè)置中，我們可以對卷軸中間部分的內(nèi)容進(jìn)行更換，胖友們也可以自己設(shè)置卷軸樣式進(jìn)行替換。

3.在上傳圖片時，我們需要選擇自由模式進(jìn)行上傳，這樣能更好的適配素材尺寸。

將模板中的圖片一一替換后，我們就完成了樣式的調(diào)整。

怎么樣，是不是特別簡單！接下來，三兒整理了一些常見的問題，給胖友們做了一個匯總。

胖友們在上傳圖片時，可能會發(fā)現(xiàn)頂部的圖片比模板要高，導(dǎo)致頂部圖片部分被遮擋。出現(xiàn)這種情況，我們可以通過HTML代碼進(jìn)行修改。

1.將所有圖片上傳完成后，點(diǎn)擊編輯器左上角的『HTML』，進(jìn)入代碼編輯模式。

2.在HTML代碼界面，找到三兒下面標(biāo)注出來的代碼，對代碼內(nèi)容進(jìn)行調(diào)整。這兩部分代碼，一個代表的是高度，一個代表的是動畫的初始值。

 <svg opacity="0" preserveaspectratio="xMidYMin meet" style="height: 50px;width: 345px !important;" viewbox="0 0 750 50" width="100%" xmlns="http://www.w3.org/2000/svg" height="2311">

                    <rect width="750" height="10000" x="0" y="0" style="fill: #000000;"></rect>

                    <animate data-svg-style="135-click-move" attributename="height" fill="freeze" restart="never" keytimes="0;0.15;1" values="50;2311;2311" dur="83s" begin="click"></animate>

                </svg>

既然是頂部圖片部分被遮擋了，那我們只需要將這個數(shù)值改的大一些即可。

在這里需要注意的是，兩個代碼的數(shù)值需要保持一致。

修改完成后，我們再次點(diǎn)擊『HTML』按鈕切換回編輯界面，點(diǎn)擊右側(cè)的『手機(jī)預(yù)覽』看看顯示是否正確，如果依然被遮擋，那么再次進(jìn)入『HTML』模式修改數(shù)值即可。

胖友們在進(jìn)行圖片替換時，可能會有模板不夠用或者多出的情況。不用擔(dān)心，我們在『動畫』設(shè)置界面即可對模板進(jìn)行增加或刪除的操作！有再多的內(nèi)容也不怕塞不下啦！

卷軸樣式使用的場景非常廣泛，除了使用卷軸效果外，三兒還為你們找到了很多大號都在使用的創(chuàng)意玩法，一起來看看吧！

（點(diǎn)擊圖片查看詳情）

（點(diǎn)擊圖片查看詳情）

（點(diǎn)擊圖片查看詳情）

福利時刻-免費(fèi)領(lǐng)取7天135編輯器VIP會員】

點(diǎn)擊http://qwer.com.cn/users/invite/ddb12a17ce400c35fe041d275a578351，注冊135編輯器，即可獲得7天VIP會員