【SVG效果】春季踏青實(shí)操
本文介紹了滑動(dòng)SVG的一種創(chuàng)新玩法——左右交錯(cuò)滑開(kāi)再點(diǎn)擊展開(kāi)的效果，該效果具有高度互動(dòng)性和創(chuàng)意性，在許多知名品牌推廣文章中廣泛應(yīng)用。這款SVG組件通過(guò)讓用戶左右滑動(dòng)屏幕以撥開(kāi)人群等元素，進(jìn)而點(diǎn)擊后展現(xiàn)更多內(nèi)容，適用于多種主題場(chǎng)景，如春日踏青等。
嗨嘍，寶子們
今天三兒給大家?guī)?lái)了
滑動(dòng)SVG的新玩法
左右交錯(cuò)滑開(kāi)再點(diǎn)擊展開(kāi)效果
此款效果在眾多大牌推文中
都出現(xiàn)過(guò)
很適合用來(lái)做創(chuàng)意
那么我們?cè)挷欢嗾f(shuō)
一起來(lái)看看吧
<左右滑動(dòng)撥開(kāi)人群再點(diǎn)擊展開(kāi)>
此款SVG效果的名稱為左右交錯(cuò)滑開(kāi)再點(diǎn)擊展開(kāi)，ID：291，在很多大牌推文中都有出現(xiàn)過(guò)，實(shí)用性極高。是集超高互動(dòng)性和創(chuàng)意于一體的SVG組件。
就拿上面三兒所展示的例子來(lái)說(shuō)吧，現(xiàn)在正值春季，是旅游踏青的好時(shí)節(jié)，三兒就想到用此SVG與春日踏青主題結(jié)合玩創(chuàng)意。
在游玩的過(guò)程中自然少不了人山人海的場(chǎng)面了，所以我在滑動(dòng)部分就想到了用4組插畫(huà)人物做引導(dǎo)，以“撥開(kāi)人群”為小巧思，吸引用戶停留并進(jìn)行互動(dòng)。
小伙伴們也可以按照此思路進(jìn)行發(fā)散，在滑動(dòng)部分除了放插畫(huà)人物，也可以放其他元素來(lái)做創(chuàng)意，只要跟主題相契合，都會(huì)很出彩。
首先我們需要進(jìn)入到SVG編輯器中，在【滑動(dòng)效果】中搜索關(guān)鍵詞：左右交錯(cuò)滑開(kāi)，或者是輸入ID：291。
將此效果放入編輯區(qū)域后，就需要我們添加相應(yīng)的圖片。此效果由三個(gè)部分組成，底圖、滑動(dòng)圖以及展開(kāi)后的內(nèi)容。
底圖和滑動(dòng)圖部分的圖片寬高尺寸需要保持一致。
接下來(lái)三兒要著重給大家講解一下滑動(dòng)圖的設(shè)置問(wèn)題。
滑動(dòng)圖需要用到PNG格式，即滑動(dòng)元素的背景應(yīng)該是透明的。
該組件的滑動(dòng)方向的順序是按照左右或者右左依次交替變化的，所以在【滑動(dòng)初始方向位置】的選擇上需要根據(jù)你第一個(gè)想要滑動(dòng)的元素方向?yàn)闇?zhǔn)。
將所有滑動(dòng)圖放好后，就可以給底圖設(shè)置觸發(fā)點(diǎn)擊展開(kāi)的區(qū)域，拖拽紅色部分即可。
展開(kāi)后的內(nèi)容編輯，就可以根據(jù)你自己的需要來(lái)進(jìn)行自由搭配，可以放無(wú)縫圖或者輪播、滑動(dòng)SVG，跟編輯普通的點(diǎn)擊展開(kāi)效果做法類似。
以上就是三兒分享的全部?jī)?nèi)容了
眼睛會(huì)了可不行
看完還得勤加練習(xí)哦
如果覺(jué)得還不錯(cuò)
記得給三兒點(diǎn)個(gè)贊+在看哦
最近咱們的春日活動(dòng)正在進(jìn)行中
現(xiàn)在下單
即可獲得超多福利
掃描下方二維碼
即可領(lǐng)取
立即登錄
