公眾號(hào)推文創(chuàng)意霜降SVG排版教程
探索秋季最后一個(gè)節(jié)氣的創(chuàng)新表達(dá)方式！本文介紹了如何使用SVG技術(shù)打造沉浸式霜降推文，通過點(diǎn)擊紅葉展開內(nèi)容，引領(lǐng)讀者體驗(yàn)成都周邊紅葉觀賞點(diǎn)。結(jié)合SVG交互效果與橫屏設(shè)計(jì)，為讀者帶來全新的視覺享受。立即閱讀，獲取創(chuàng)意靈感，讓你的新媒體內(nèi)容脫穎而出！
“一夜西風(fēng)緊，葉落疊成詩。霜伴紅葉， 是對(duì)秋最浪漫的告別?！?/span>
還有一周時(shí)間我們就要迎來秋季的最后一個(gè)節(jié)氣——霜降了，寶子們是否已經(jīng)開始準(zhǔn)備推文了呢？以往大家可能習(xí)慣用傳統(tǒng)的圖文形式來展示，但看起來中規(guī)中矩，所以今天三兒想為大家介紹一種新的形式，用SVG打造有新意的霜降排版效果。快跟著三兒一起來獲取靈感吧！
這是來自成都發(fā)布推出的一篇充滿創(chuàng)意的霜降推文。該推文巧妙運(yùn)用了SVG交互效果與橫屏設(shè)計(jì)，精心向讀者推薦了成都周邊觀賞紅葉的絕佳景點(diǎn)。
整篇推文的排版設(shè)計(jì)頗為巧妙，通過讓讀者點(diǎn)擊紅葉的方式展開全文內(nèi)容，引領(lǐng)讀者隨著紅葉緩緩飄落的軌跡，逐步瀏覽各個(gè)景點(diǎn)。相較于傳統(tǒng)的平鋪直敘式的圖片展示，這種新穎的方式更能捕獲用戶的注意力，使他們能夠沉浸其中，完整地閱讀整篇推文。
本文用到的SVG效果為點(diǎn)擊展開時(shí)上層物體移動(dòng)，ID：130。
在135編輯器頁面左側(cè)選擇【SVG編輯器】——【進(jìn)入SVG編輯器】，在互動(dòng)效果中搜索ID:130，將該效果放在編輯頁面。
該組件需要添加3個(gè)部分的圖片素材，分別是展開首圖、小元素圖片、展開后的圖片。
這里需要注意的是小元素圖片部分在設(shè)計(jì)時(shí)，需要做成png格式的透明圖。同時(shí)，展開首圖和展開后圖片這兩個(gè)部分的圖片素材寬度需要保持一致。
①設(shè)置小元素的觸發(fā)區(qū)：拖拽紅色區(qū)域的位置，放在元素圖的上方即可。
② 添加展開后內(nèi)容部分的圖片：點(diǎn)擊【編輯展開內(nèi)容】，在這里選擇無縫圖組件，可以在效果中心搜索無縫圖，選擇批量無縫圖組件，ID：3。將展開后需要用到的圖片添加到組件中去。
點(diǎn)擊【展開動(dòng)畫時(shí)長】，設(shè)置該效果展示的時(shí)間，數(shù)字越大，組件展開的速度越慢，數(shù)字越小，組件展開的速度越快。
組件設(shè)置完成后，點(diǎn)擊右上角的【同步】【導(dǎo)出】，即可導(dǎo)入到公眾號(hào)后臺(tái)。
以上就是三兒分享的全部內(nèi)容了
如果覺得還不錯(cuò)
記得點(diǎn)贊+在看哦
如果你還有什么想看想學(xué)的
歡迎在評(píng)論區(qū)留言哦
*以上所涉及的素材僅供學(xué)習(xí)交流使用，侵聯(lián)刪
立即登錄
