SVG創(chuàng)意推文—『點(diǎn)擊開(kāi)窗』教程
最近這段時(shí)間，各大官媒齊齊出手，朝著SVG創(chuàng)意推文進(jìn)軍。
嘿，胖友們大家好呀，我是三兒。
好久不見(jiàn)，胖友們有沒(méi)有想我呀！最近這段時(shí)間，各大官媒齊齊出手，朝著SVG創(chuàng)意推文進(jìn)軍。之前人民日?qǐng)?bào)推了一篇《點(diǎn)亮武漢》在當(dāng)時(shí)引起了不小的轟動(dòng)，三兒也連忙出了一篇教程。
前兩天，新華社又推了一篇『點(diǎn)擊開(kāi)窗』的推文，用戶(hù)可以點(diǎn)擊打開(kāi)窗戶(hù)，看到各地的美景。
為了讓胖友們更直觀的感受推文的效果，三兒將這些圖做成了動(dòng)圖，胖友們可以通過(guò)滑動(dòng)來(lái)查看哦！
<左右滑動(dòng)查看更多>
怎么樣，是不是超級(jí)好玩，那么今天，三兒就來(lái)教你們?nèi)绾沃谱鬟@種點(diǎn)擊滑動(dòng)的效果吧！
話(huà)不多說(shuō)，教程來(lái)咯~
點(diǎn)擊開(kāi)門(mén)樣式
ID:98647
【樣式作用】：點(diǎn)擊窗戶(hù)，樣式兩側(cè)內(nèi)容會(huì)自動(dòng)滑開(kāi)，顯示出底部的內(nèi)容，可以搭配無(wú)縫樣式制作出更多有趣味性的推文。
【使用說(shuō)明】：新版的SVG樣式均可以在『動(dòng)畫(huà)』按鈕中完成所有的設(shè)置。
【這些樣式也可以用這個(gè)教程哦】樣式ID：98646
??點(diǎn)擊有驚喜哦??
圖片切換樣式ID:98647
由于編輯器升級(jí)了專(zhuān)業(yè)版，簡(jiǎn)化了部分svg樣式的操作流程，使得修改svg樣式大部分參數(shù)無(wú)需再通過(guò)html代碼實(shí)現(xiàn)。本點(diǎn)擊樣式所有參數(shù)都可通過(guò)動(dòng)畫(huà)設(shè)置調(diào)整。
將編輯器切換到專(zhuān)業(yè)版模式，點(diǎn)擊樣式區(qū)域彈出對(duì)話(huà)框，在【全局樣式】中點(diǎn)擊動(dòng)畫(huà)按鈕，開(kāi)始修改SVG樣式參數(shù)。
這里需要注意的是：不是所有樣式都有動(dòng)畫(huà)選項(xiàng)哦，只有SVG樣式會(huì)有動(dòng)畫(huà)顯示！
2.切換完成后，我們就可以對(duì)樣式進(jìn)行修改了，在左側(cè)搜索樣式ID『98647』，將樣式插入至編輯器中。
這里需要注意的是：編輯時(shí)請(qǐng)不要點(diǎn)擊圖片區(qū)域，以防觸發(fā)動(dòng)畫(huà)保存失效。
3.接下來(lái)我們要準(zhǔn)備三張圖片，兩張開(kāi)門(mén)的圖片以及需要展示的背景圖，這里需要注意的是，滑動(dòng)的兩張圖合在一起時(shí)需要和底部的圖片寬高一致。
▲滑動(dòng)圖片和底圖展示
如果胖友們想直接使用我們樣式里的滑動(dòng)圖片，那么需要注意的是，將底部圖片修改為樣式素材中底圖的尺寸即可。
胖友們可以在這里查看底圖的尺寸哦!
4.點(diǎn)擊選中樣式（在樣式周?chē)霈F(xiàn)紅框時(shí)，才算選中哦！），在彈出的菜單欄中，選擇『動(dòng)畫(huà)』按鈕，進(jìn)入動(dòng)畫(huà)設(shè)置界面。
這里需要注意的是：只有SVG樣式才會(huì)有動(dòng)畫(huà)按鈕哦，普通的樣式是沒(méi)有動(dòng)畫(huà)按鈕的！
5.在動(dòng)畫(huà)設(shè)置界面，我們就可以對(duì)樣式的內(nèi)容進(jìn)行設(shè)置了，胖友們可以對(duì)頂部的文字，背景圖片，以及左右兩側(cè)滑動(dòng)圖片進(jìn)行更換。
在更換左右兩側(cè)圖片時(shí)，我們需要注意的是，在上傳圖片界面需要選擇『自由』進(jìn)行上傳，才會(huì)讓圖片更好的適配哦！
6.設(shè)置完所有內(nèi)容以后，胖友們可以在右側(cè)的預(yù)覽框中進(jìn)行測(cè)試，也可以返回編輯器界面，點(diǎn)擊右側(cè)菜單欄中的『手機(jī)預(yù)覽』進(jìn)行測(cè)試。
注意事項(xiàng)：
這里需要注意的是，由于微信后臺(tái)限制，所以排版完成后的推文需要使用保存同步功能，如果使用復(fù)制粘貼會(huì)導(dǎo)致樣式失效哦！
現(xiàn)在SVG推文這么火，還不趕緊學(xué)會(huì)了給用戶(hù)們露一手？
想學(xué)習(xí)更多的SVG樣式嗎？想制作出更好玩的互動(dòng)排版嗎？
那還等啥，趕快去評(píng)論區(qū)留言，說(shuō)出你最喜歡用的SVG樣式，我們將在評(píng)論區(qū)抽出10位胖友，送出巖植主編的《SVG變形記》課程哦！
好啦，今天的教程就到這里啦
胖友們學(xué)會(huì)了嗎？
如果你還有關(guān)于其它樣式的疑問(wèn)
都可以留言告訴三兒哦
點(diǎn)擊http://www.jyrst.com/users/invite/ddb12a17ce400c35fe041d275a578351，注冊(cè)135編輯器，即可獲得7天VIP會(huì)員
立即登錄
- 知乎熱議：微信公眾號(hào)如何快速漲粉？
- 0基礎(chǔ)運(yùn)營(yíng)小白學(xué)習(xí)什么新媒體課程比較好？
- 新媒體，自媒體新人必學(xué)的課程有哪些？
- 不懂就問(wèn)：新媒體運(yùn)營(yíng)應(yīng)該怎樣學(xué)習(xí)？
