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