《2024年3月SVG交互图文大赏》

原创 收藏 评论
举报 2024-04-02


想知道2024年3月火爆的SVG交互图文都有哪些吗?


今天为大家整理10篇3月的优秀SVG交互图文,分别来自央视新闻、人民网、Apple、GQ实验室、李宁、米其林中国、Babycare、泸州老窖、美的集团、NIKE,这些使用了交互效果的图文不仅让人眼前一亮,更是让阅读量、点赞数飙升!


01

央视新闻

《出 发 !去 追 光 !•ᴗ•方表全公开》

▲GIF演示

点此查看原文

点击央视新闻的这篇图文,跟随光点一起展开更多的内容,手指下滑的同时对话框和文字等内容一一浮现或弹出,吸引大家了解我国新质生产力的发展。

交互对应编辑器组件/组合


02

人民网

《今日春分,万象“耕”新!》

2.gif

▲GIF演示

点此查看原文

「点击展开」的同时播放拖拉机耕种的动画,长图漫画逐渐从模糊到清晰,带大家领略春耕的震撼,祝福今年丰收。

交互对应编辑器组件/组合


03

Apple

《今晚 Apple 静安开幕,等你进店来一场都市漫步。》

▲GIF演示

点此查看原文

「点击消失后展开」Apple新零售店的探店之旅,「左滑」查看店面的细节,「点击横向展开」更多Apple产品介绍,吸引大家前往实体店打卡。

交互对应编辑器组件/组合


04

GQ实验室

《朱一龙??????》

▲GIF演示

点此查看原文

「点击不同选项切换选择」不同的搭配,最后生成不一样的朱一龙海报,模拟完成一场角色扮演的游戏,吸引大家互动。

交互对应编辑器组件/组合


05

李宁

《谁的身体还在为 i 做 e ?》

5.gif

▲GIF演示

点此查看原文

「点击切换后展开」模拟开始答题测试,最后根据选项推测你属于哪一种类型,「左滑」依次介绍李宁新款服装。

交互对应编辑器组件/组合


06

米其林中国

《神奇的树木在这里!》

6.gif

▲GIF演示

点此查看原文

植树节之际,米其林通过「自动SVG轨迹移动」的交互模拟线条延申吸引用户的目光,借此宣传“0碳出行”。

交互对应编辑器组件/组合


07

Babycare

《春季新品 | 上新一座游乐场》

▲GIF演示

点此查看原文

「上滑」模拟精灵小人乘着绿叶滑翔伞降落的情景,过程中可以「点击切换查看」Babycare春季限定系列套装的介绍,吸引大家评论#你最喜欢哪款春季限定#话题,从而领取礼品。

交互对应编辑器组件/组合

组合:三层上滑组合点此免费领取

编号:11761(组合)

组件:点击-切换GIF动图(有触发区)点此免费领取

编号:10087(组件)

组件:自动-轮播Banner(超链接)

编号:10209(组件)

组件:自动-轮播Banner(向右、超链接)

编号:10894(组件)

08

泸州老窖

《这坛酝酿了700年的酒,是瞬间,也是永恒》

▲GIF演示

点此查看原文

「连续点击镜头式放大消失后展开」泸州老窖的酿造过程,借此宣传泸州老窖·国窖1573封藏大典,吸引大家一起来开启“生命中的那坛酒”。

交互对应编辑器组件/组合

组合:连续点击-镜头式放大消失+展开点此免费领取

编号:11842(组合)

09

美的集团

《假如世界没有女人?》

▲GIF演示

点此查看原文

「连续点击」模拟上帝给碗里加配方的方式创造女人,引起大家的共鸣,然后「点击展开」3838美的眼的视频,借此祝大家女神月快乐!

交互对应编辑器组件/组合

组合:连续点击切换GIF动图+点击展开(有触发区)

编号:10162(组合)

10

NIKE

《JORDAN WORLD OF FLIGHT 北京,欢迎你抵达》

▲GIF演示

点此查看原文

「上滑」模拟乘电梯的方式查看NIKE系列服装介绍,「左滑」查看更多细节,吸引大家前往小程序购买。

交互对应编辑器组件/组合

组合:上滑组合(自动对齐)

编号:11382(组合)

本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
转载请在文章开头和结尾显眼处标注:作者、出处和链接。不按规范转载侵权必究。
本文系作者授权数英发表,内容为作者独立观点,不代表数英立场。
未经授权严禁转载,授权事宜请联系作者本人,侵权必究。
本内容为作者独立观点,不代表数英立场。
本文禁止转载,侵权必究。
本文系数英原创,未经允许不得转载。
授权事宜请至数英微信公众号(ID: digitaling) 后台授权,侵权必究。

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    DIGITALING
    登录后参与评论

    评论

    文明发言,无意义评论将很快被删除,异常行为可能被禁言
    800

    推荐评论

    暂无评论哦,快来评论一下吧!

    全部评论(0条)