iSVG

基于开源共享精神的SVG交互图文搜索引擎·无偿使用·公益助力疫情下数字经济复苏

小得盈满,恰如其分|GIF播放+图文伸长|真果粒

雨滴滴落地动效与麦子引出小满节气,图文自动伸长进入正文,人物使用了侧边滑入与抖动的动效,下面的两组元素使用了同样的动效,保持了风格的统一性,结尾使用了元素浮动的动效,多个动效的组合使用让图文变得活泼有趣。

都市型录,摩登上场|无限选择+伸长动画|ECCO爱步

无限选择架构与伸长动画的复合,进而产生无限选择式伸长的进阶效果,使得页面信息的逻辑感进一步提升,让多样鞋品的浏览体验更具条理性。

🧡 痘 你 玩 🧡|连续点击切换-伸长|局部气候调查组

SVG 在线挤痘痘!本期科普图文一方面生动具象普及了痘痘的医学知识,在阅读体验层面以点击切换引导用户亲自操作,更以一组快感十足的长按交互模拟了按到底才能挤出「成果」的恶心感,将 SVG 的交互趣味推向巅峰。

「龙井·芝士糯糯」,还你|自动动画|HEYTEA喜茶

禅意感的置景缓缓变化,随后衔接灵动的网友评论滚动,这样的自动 SVG 动画表现恰到好处,清晰度体验极佳。

奈雪×姆明|过快乐宝宝节,送姆明限定周边|视差滑动|奈雪的茶

可爱温暖的姆明来啦!奈雪本期联名推广,采用视差 3D 和伸长图文复合,开场以单屏开启阅读,进入姆明的立体多彩世界,故事感十足。在场景的结尾继续点击,也可以切换进入完整的商详长图了解产品和周边信息,行文逻辑一气呵成,视觉沉浸感极佳。

福利解密局|小宝这场生日会玩到next level了|消消乐|宝矿力水特FansClub

本作中呈现的「消消乐」小游戏,连续点击两个相同的答案即可消除,巧妙融合了品牌元素与趣味玩法。目前该效果可以通过 E2.COOL 黑科技编辑器(https://www.e2.cool/)的UGC组件「消消乐」实现。

猫的花色原理,这里都说明白了|小游戏|局部气候调查组

局部气候又一脑洞大开的作品,以「猫猫上色工厂」为主题科普猫的花色原理。本作混搭了多款精妙的交互小组件,如「连续GIF控制器」呈现多次喷色效果,「幸运抽签-长按式」实现自定义调色,宛如神来之笔,寓教于乐,乐趣十足。

入职茅台,你会成为怎样的茅台大师?|答题|小茅i茅台

多段伸长答题+进阶式可保存海报结构,抽丝剥茧般引导用户解锁人才培养理念,在趣味答题互动中传递出企业价值观。

CoolSITE360 提供 UI/UX 支持  Copyright © 2013-2023 iSVG
投稿/定制/培训:微信公众号、小红书「iSVG」

沪ICP备2022011523号