山、石頭、標(biāo)識(shí)符等元素大圖自動(dòng)播放,播放結(jié)束后順滑展開(kāi)后續(xù)內(nèi)容。超級(jí)跑鞋以泥地為背景,畫(huà)面不斷刷新切換成干凈白紙,強(qiáng)烈視覺(jué)對(duì)比瞬間吸睛。跑鞋多場(chǎng)景使用圖同步差速立體滑動(dòng),自然融入山地場(chǎng)景中,層次豐富,讓產(chǎn)品展示更具動(dòng)態(tài)質(zhì)感與沉浸感。
紅包輕晃帶動(dòng)態(tài)提示引導(dǎo)雙擊,雙擊即刻觸發(fā)仿微信紅包開(kāi)啟動(dòng)效,封面緩緩掀開(kāi)、紅包主體舒展切換,元寶 10 億新春紅包活動(dòng)信息順勢(shì)展開(kāi),頁(yè)面內(nèi)部縱向伸長(zhǎng),金色元寶粒子輕盈飄落,馬年新春氛圍拉滿(mǎn),動(dòng)效流暢銜接,讓活動(dòng)信息展現(xiàn)更具節(jié)日驚喜感。
以固定背景圖層為基底,頂層放置獲獎(jiǎng)名單并支持左右滑動(dòng)切換,核心用漸變遮罩效果呈現(xiàn)各獎(jiǎng)項(xiàng),讓獎(jiǎng)項(xiàng)內(nèi)容隨遮罩漸變自然展出,弱化邊緣更具視覺(jué)層次感,滑動(dòng)時(shí)遮罩同步適配,讓信息展示流暢且有質(zhì)感,整體視覺(jué)簡(jiǎn)潔又富有動(dòng)態(tài)美感。該效果可以使用 E2 編輯器「頂層滑動(dòng)」組件實(shí)現(xiàn)。
這款 SVG 撲克互動(dòng)由 E2 編輯器「互斥抽拉」模版制作,核心為互斥抽拉效果:點(diǎn)擊右側(cè)撲克牌的牌尖位置,該牌會(huì)即刻觸發(fā)抽拉抽出的動(dòng)態(tài),同時(shí)觸發(fā)互斥聯(lián)動(dòng),另一張撲克牌會(huì)同步自動(dòng)收回,兩張牌始終保持一抽一收的互斥狀態(tài),抽收的動(dòng)作銜接流暢,互斥抽拉的特性展現(xiàn)得十分直觀。
敲木魚(yú)模型的優(yōu)秀變體思路,在官方首創(chuàng)模型的基礎(chǔ)上,調(diào)整了前景的運(yùn)動(dòng)方式,產(chǎn)生搖搖馬左右快速抖動(dòng)的彈性效果;浮現(xiàn)文字則層層疊加,使得信息量逐步遞增;最后巧妙觸發(fā)伸長(zhǎng)的交互熱區(qū),銜接了SVG展開(kāi)效果,極大豐富了該互動(dòng)效果的內(nèi)容拓展性。
依托 E2 編輯器「無(wú)限選擇器」與「縱向滑動(dòng)」組件組合搭建擬態(tài)書(shū)籍效果,沉浸式呈現(xiàn)「經(jīng)濟(jì)」「金融」等六大領(lǐng)域的入圍書(shū)單內(nèi)容。
基于 touchstart 和 click 實(shí)現(xiàn)的選擇性無(wú)限往返伸縮器效果,將產(chǎn)品賣(mài)點(diǎn)巧妙融入三種年終狀態(tài)切換中,契合當(dāng)代年輕人的情感表達(dá)。
通過(guò)「漢堡包滑動(dòng)」組件,巧妙模擬服飾在東方意境中的穿梭動(dòng)態(tài),還原香云紗的非遺工藝。同時(shí)配合「多熱區(qū)無(wú)限浮現(xiàn)-關(guān)閉」組件深度展示三層貼合科技,呈現(xiàn)出品牌的匠心獨(dú)運(yùn)。目前該效果可通過(guò)「點(diǎn)擊-播放GIF切換任意內(nèi)容-伸長(zhǎng)」「多熱區(qū)無(wú)限浮現(xiàn)-關(guān)閉」、「漢堡包滑動(dòng)」等組件搭配實(shí)現(xiàn)。

CoolSITE360 提供 UI/UX 支持? Copyright ? 2013-2025 iSVG
投稿/定制/培訓(xùn):微信公眾號(hào)、小紅書(shū)「iSVG」