公眾號文章制作點擊展開SVG卷軸樣式教程
用135編輯器如何實現，【人民網】公眾號這種【點擊展開卷軸】的特殊效果？
點擊展開卷軸樣式
用135編輯器如何實現，【人民網】公眾號這種【點擊展開卷軸】的特殊效果？
掃描這個二維碼來體驗一下
*注意：此樣式在部分安卓手機上會出現閃跳問題，這是安卓微信的bug，我們已經向微信官方團隊反饋。
——2020年5月28日
這種特殊的交互效果，可以輕松用135編輯器實現，在135編輯器內搜索樣式“卷軸”，或者直接搜索ID“98461”，即可收藏使用
先說說為什么用卷軸，就拿人民網這篇文章舉例，文章內容主要是講2020年兩會的政府工作報告內容。用長圖的形式展示，比純文字更便于閱讀，而且加上卷軸徐徐展開的特殊效果，給人耳目一新的感覺。
接下來我們就講講如何制作這款特殊的樣式。
卷軸樣式的使用
1、卷軸內要求放置圖片。圖片大小不得超過10M，如果單張圖片過大，需要裁切成多張圖進行上傳。
2、查找樣式，在135編輯器內搜索“卷軸”，即可找到這款跟人民網文章同款的卷軸樣式了。
3、使用此樣式，需要授權同步功能，將編輯好的文章同步到公眾號后臺，點擊此處查看授權公眾號教程
將菜單更換成【專業(yè)版】。點擊【更多功能】-【換專業(yè)版】即可將樣式菜單更換成專業(yè)版菜單。如果默認情況就是專業(yè)版菜單，則無需變更。記住，要調整SVG樣式，必須使用專業(yè)版菜單才能編輯。
單擊樣式，在彈出的菜單欄上，點擊【動畫】
在SVG動畫設置里，你可以點擊【圖片上傳】將樣式內圖片素材進行替換。
這里我們要了解，卷軸頂部和卷軸底部都是一開始就展現在讀者面前的。中間部分是點擊后才會緩緩展開的。我們這個樣式，支持替換卷軸頂部、中部、底部。
上傳圖片時默認使用【自由模式】，進行上傳
將模板中的圖片一一替換掉，就完成了樣式的調整。在編輯中，你還可能遇到以下幾種情況：
上傳的頂部圖片比原模板的圖片要高，會導致圖片部分被遮擋?？梢栽谒兴夭膱D片上傳完畢后。在HTML代碼里進行微調。
點擊【HTML】，進入代碼模式
將下面標記的代碼進行調整。一個是高度，一個是動畫初始值。既然是被遮擋了部分，那就需要把這個數值改得更大一些。
<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>
修改完畢之后，再次點擊【HTML】切換到編輯模式，點擊手機預覽看看是否合適。如果依然被遮擋，那么再進入【HTML】模式調整一下數值即可。
中間的內容圖片支持增減。再多的內容也不怕塞不下了！
這個樣式除了支持卷軸效果以外
還有很多創(chuàng)意玩法，例如
橫向展開帷幕
掃碼預覽
展開條漫
掃碼預覽
拉開禮盒
掃碼預覽
立即登錄
