【SVG效果】春季踏青實操

本文介紹了滑動SVG的一種創(chuàng)新玩法——左右交錯滑開再點擊展開的效果,該效果具有高度互動性和創(chuàng)意性,在許多知名品牌推廣文章中廣泛應(yīng)用。這款SVG組件通過讓用戶左右滑動屏幕以撥開人群等元素,進而點擊后展現(xiàn)更多內(nèi)容,適用于多種主題場景,如春日踏青等。

滑動SVG新玩法

左右交錯滑開

嗨嘍,寶子們

今天三兒給大家?guī)砹?/span>

滑動SVG的新玩法

左右交錯滑開再點擊展開效果

此款效果在眾多大牌推文中

都出現(xiàn)過

很適合用來做創(chuàng)意

那么我們話不多說

一起來看看吧



1.效果展示


·
·
·

·


·

<左右滑動撥開人群再點擊展開>



此款SVG效果的名稱為左右交錯滑開再點擊展開,ID:291,在很多大牌推文中都有出現(xiàn)過,實用性極高。是集超高互動性和創(chuàng)意于一體的SVG組件。


就拿上面三兒所展示的例子來說吧,現(xiàn)在正值春季,是旅游踏青的好時節(jié),三兒就想到用此SVG與春日踏青主題結(jié)合玩創(chuàng)意。


在游玩的過程中自然少不了人山人海的場面了,所以我在滑動部分就想到了用4組插畫人物做引導(dǎo),以“撥開人群”為小巧思,吸引用戶停留并進行互動。


小伙伴們也可以按照此思路進行發(fā)散,在滑動部分除了放插畫人物,也可以放其他元素來做創(chuàng)意,只要跟主題相契合,都會很出彩。




2.操作教程展示


首先我們需要進入到SVG編輯器中,在【滑動效果】中搜索關(guān)鍵詞:左右交錯滑開,或者是輸入ID:291。



將此效果放入編輯區(qū)域后,就需要我們添加相應(yīng)的圖片。此效果由三個部分組成,底圖、滑動圖以及展開后的內(nèi)容。



底圖和滑動圖部分的圖片寬高尺寸需要保持一致。


接下來三兒要著重給大家講解一下滑動圖的設(shè)置問題。


滑動圖部分>>


滑動圖需要用到PNG格式,即滑動元素的背景應(yīng)該是透明的。



該組件的滑動方向的順序是按照左右或者右左依次交替變化的,所以在【滑動初始方向位置】的選擇上需要根據(jù)你第一個想要滑動的元素方向為準(zhǔn)。



將所有滑動圖放好后,就可以給底圖設(shè)置觸發(fā)點擊展開的區(qū)域,拖拽紅色部分即可。



展開后的內(nèi)容編輯,就可以根據(jù)你自己的需要來進行自由搭配,可以放無縫圖或者輪播、滑動SVG,跟編輯普通的點擊展開效果做法類似。





以上就是三兒分享的全部內(nèi)容了

眼睛會了可不行

看完還得勤加練習(xí)哦

如果覺得還不錯

記得給三兒點個贊+在看哦


最近咱們的春日活動正在進行中

現(xiàn)在下單

即可獲得超多福利

掃描下方二維碼

即可領(lǐng)取




END




文章申明:本文章轉(zhuǎn)載自互聯(lián)網(wǎng)公開渠道,如有侵權(quán)請聯(lián)系我們刪除
文章評價
登錄后可以評論
立即登錄
比格設(shè)計
熱門工具
135編輯器
領(lǐng)先的在線圖文編輯平臺原創(chuàng)樣式素材,一鍵套用
筆格設(shè)計
受歡迎的在線作圖網(wǎng)站,新媒體配圖、手機海報應(yīng)有盡有
筆格PPT
輸入主題,AI一鍵生成PPT;上傳本地文件秒變PPT
管小助
企業(yè)營銷、私域流量運營——站式營銷管理平臺
推薦文章
用戶運營平臺產(chǎn)品設(shè)計指南
淺談用戶運營中的用戶分層
內(nèi)容運營:戴上寫作的六頂思考帽
5000字方法論:4個細節(jié),決定私域能不能賺錢
一個案例說明白用戶分析怎么用
22條視頻,漲粉12.6萬,一個女孩子在抖音靠洗車也能月入過萬!
高價值社群的5大核心關(guān)鍵
抖音賬號內(nèi)容自檢清單!
決定離職后,3天拿到offer的總結(jié)與反思!
【135早資訊】:教育部將徹查教材插圖問題;抖音6月1日起將對本地生活商家收取服務(wù)費
熱門素材樣式
運營導(dǎo)航
運營工具
分享到