ASCII码 ASCII码

意派Epub360丨【冬奥会H5集锦】给你不一样的指尖互动体验

发布于:2022-02-18 10:25:03  栏目:技术文档

中秋公众号封面-电脑端 (1).png

要说最近讨论度最高的热点事件,那肯定非冬奥会莫属了。无论是火到断货的冬奥会吉祥物冰墩墩(此时,一位不知名的川沙女明星路过),还是表现亮眼的夺金名将谷爱凌、苏翊鸣,都是热搜榜常驻嘉宾。而各式各样的冬奥会H5也凭借丰富多元的创意设计为大家带来了有趣的互动体验。

这么多优秀作品尽在眼前,我不允许有人错过,赶紧一起来欣赏欣赏吧~

合成头像

《冬奥头像换换换》

dsO9Zpjmp8sYWoFF__thumbnail (21).png

出品方:北京冬奥组委官网

实现方式:定制开发

创意特色:微信授权、合成海报

内容简介:经过微信授权后,该H5可自动获取用户的微信头像。用户可任选一种头像样式(头像样式非常丰富,主要分为“冬奥印象”及“冰雪新年”两组),再根据提示生成不同的图片:①点击“保存头像”按钮,生成专属的冬奥头像;②点击“助力冬奥”按钮并选择家乡,生成专属的助力海报。

《告别“一墩难求”,速领运动版“冰墩墩”专属头像!》

点击标题体验

dsO9Zpjmp8sYWoFF__thumbnail (7).png

出品方:永不消逝的电波

实现方式:意派Epub360 H5编辑器

创意特色:参数变量、合成海报

内容简介:用户进入作品后,可先选择底图、头像样式,再通过“保存头像”按钮获得一份新合成的头像(头像可通过长按保存至手机)。底图的获取途径有三种:①从三张预设底图中选择;②拍照;③从手机相册中选择)。

《冬奥定制头像来啦!》

点击标题体验

dsO9Zpjmp8sYWoFF__thumbnail (24).png

出品方:孚莱科技

实现方式:意派Epub360 H5编辑器

创意特色:DIY图片、合成海报

内容简介:用户可先上传图片,再选择装饰元素并进行调整(元素支持移动、缩放、旋转、置顶/置底、水平/垂直翻转等多项操作)。全部设置好后,即可通过“确认”按钮生成一份专属的合成头像。

资讯科普

《艺术里的奥林匹克》邀您新春逛馆

点击标题体验

dsO9Zpjmp8sYWoFF__thumbnail (8).png

出品方:中央广播电视总台

实现方式:意派Epub360 H5编辑器

创意特色:横屏、长页面、网页跳转

内容简介:该H5主要以线上艺术馆的方式向用户介绍奥林匹克发展进程中具有代表性的艺术作品、中国古代体现运动的经典绘画作品以及与历届奥运会相关的艺术作品,如《掷铁饼者》《仕女蹴鞠图》等。用户可通过滑屏、点击操作浏览具体的图文内容。作品最后,用户还可根据提示转发分享或跳转至相关专题页。

《冬奥百年》

dsO9Zpjmp8sYWoFF__thumbnail (11).png

出品方:CGTN

实现方式:定制开发

创意特色:数据可视化

内容简介:该H5主要以数据可视化的方式直观呈现了百年冬奥之旅。用户可选择中文或俄文,并根据提示通过滑屏、点击操作浏览历届冬奥会的举办地、项目/运动员/代表团数量、赛况等信息。作品最后,用户还可根据提示将作品分享至微信、微博等平台。

《冬奥“绘”丨冰雪新春年味浓 功课做好全都懂》

dsO9Zpjmp8sYWoFF__thumbnail (16).png

出品方:华龙网、新重庆

实现方式:定制开发

创意特色:动画、layer

内容简介:该H5旨在邀请用户解锁冬奥知识,并送上“花式”新年祝福。用户可先从15个冬奥项目中选择自己想参加的项目,再查看该项目简介、保存新年祝福海报。

《牛转乾坤 打卡冬奥》

dsO9Zpjmp8sYWoFF__thumbnail (20).png

出品方:新华社体育部、新华社北京分社

实现方式:定制开发

创意特色:计时器、一镜到底、合成海报

内容简介:用户进入作品后,可先查看冬奥倒计时,再通过长按、点击操作体验一镜到底的滑雪之旅,并查看沿途出现的各种场馆及其简要信息。浏览完毕后,用户还可选择场馆、输入昵称,并获得一份专属的助力海报。

《冰雪之路》

dsO9Zpjmp8sYWoFF__thumbnail (23).png

品牌方:咪咕

实现方式:定制开发

创意特色:插画、网页跳转

内容简介:该H5包含各种与花滑、速滑等冰雪运动相关的插画小场景,用户可先通过场景中的提示按钮查看相关图片,再点击感兴趣的图片,跳转浏览相应的精彩视频,从而领略运动员风采、获取北京冬奥资讯等。

《H5丨冬奥盲盒上新了!》

dsO9Zpjmp8sYWoFF__thumbnail (19).png

出品方:中央广播电视总台北京总站、北京冬奥组委新闻宣传部

实现方式:定制开发

创意特色:人脸融合、参数变量、合成海报

内容简介:用户可先浏览盲盒藏品及相关冰雪冷知识,再任选一款盲盒,继而根据提示上传正脸照、选择性别及脸型,并通过提示按钮生成一份专属的人脸融合海报。

互动游戏

《冰雪动物城》

dsO9Zpjmp8sYWoFF__thumbnail (27).png

出品方:人民日报新媒体、抖音

实现方式:定制开发

创意特色:微信授权、小游戏、动画、计时器、重力感应、数据库

内容简介:该H5包含5个趣味小游戏(单板滑雪障碍追逐、花样滑冰、冰球、冬季两项、高山滑雪),用户通过“挑战TA”按钮进入感兴趣的游戏后,可先查看玩法引导,再完成挑战。5个游戏的玩法都不复杂,主要以单击、双击、滑屏等简单的交互操作为主。游戏结束后,用户可查看游戏结果,并根据提示再玩一次、返回游戏选择页、生成结果海报。每次挑战的得分会进行累计,用户可通过提示按钮查看排行榜,并获得排行海报。

《冬奥奖牌大揭秘》

dsO9Zpjmp8sYWoFF__thumbnail (10).png

出品方:央视新闻、央视体育

实现方式:定制开发

创意特色:碰撞检测、计时器、合成海报

内容简介:这是一款碰撞检测小游戏H5。用户可先填写姓名、任选一个吉祥物(冰墩墩&雪容融),再进入游戏。游戏限时30s,用户需按住吉祥物并左右滑动屏幕,从而让吉祥物接住相应的元素。若接到障碍物,则减速,若接到油箱,则加速。游戏结束后,用户可查看得分及奖牌,并通过提示按钮获得一份专属海报、查看历届奖牌。

《雪墙冲冲冲》

dsO9Zpjmp8sYWoFF__thumbnail (12).png

出品方:央视网、亿众互动

实现方式:定制开发

创意特色:微信授权、动画、计时器、小游戏、语音、合成海报

内容简介:这是一款趣味“穿墙”小游戏H5。游戏分为单双人模式(双人模式可开启语音,以供好友互相沟通),用户可先选择模式、角色,再进入游戏。游戏的交互性及趣味性都很强,用户需在雪墙靠近时拖动人物上的提示点,从而将人物调整为墙洞所示的对应姿势,以便顺利通过墙洞。游戏结束后,用户可获得一份专属的结果海报。

《文明观赛 助力冬奥》

dsO9Zpjmp8sYWoFF__thumbnail (22).png

出品方:首都文明办

实现方式:定制开发

创意特色:横屏、长页面、插画、参数变量

内容简介:这是一款考眼力小游戏。作品主要通过横屏插画长页面的方式呈现一系列与冬奥会相关的场景,用户可通过滑屏、点击操作找到各个场景中的冬奥会文明观察大使“文文”的分身。待滑动到页面末尾,用户即可查看游戏结果。

《热力传递,燃在冬季》

dsO9Zpjmp8sYWoFF__thumbnail (26).png

出品方:菲斯曼

实现方式:定制开发

创意特色:微信授权、地理位置授权、视频、AR、参数变量、合成海报

内容简介:用户进入作品后,可先浏览一段与冰雪赛事相关的短视频,再根据提示参与热力传递小游戏:按照示意图,摆出手握火炬姿势,继而生成专属海报,并转发给好友。好友完成后,用户可查看自己的热力图(作品将计算用户与好友间的地理距离,并展示在热力图中)。

答题测试

《我的冬奥村奇遇记》

dsO9Zpjmp8sYWoFF__thumbnail (15).png

出品方:中央广播电视总台国际在线

实现方式:定制开发

创意特色:微信授权、视频、测试题、参数变量、合成海报

内容简介:用户可线上探寻冬奥村的健身中心、中医药体验馆、北京小屋、运动员公寓、冬奥村餐厅,并通过先看视频再答题的方式深入了解北京冬奥村。探寻之旅结束后,用户还可获得一份专属的冬奥村村民证海报。

《激情冰雪 喜迎奥运 共享文明》

dsO9Zpjmp8sYWoFF__thumbnail (18).png

出品方:文明大兴

实现方式:定制开发

创意特色:测试题、联系表单

内容简介:这是一款线上闯关答题活动H5,作品共设有三个关卡,用户依次作答并闯关成功后,可填写姓名及手机号,以便及时获取获奖结果。

《冬奥场馆“连连看”之五棵松体育中心》

dsO9Zpjmp8sYWoFF__thumbnail (17).png

出品方:中央纪委国家监委网站

实现方式:定制开发

创意特色:视频、测试题

内容简介:用户可先通过一段短视频简单了解北京冬奥会的举办时间、赛区、场馆等信息,再根据提示选择相应的赛区及场馆,继而完成一系列测试题并观看解说视频。

同系列其他H5作品:

《冬奥场馆“连连看”之首都体育馆》

《冬奥场馆“连连看”之国家游泳中心》

《冬奥场馆“连连看”之国家雪橇雪车中心》

篇幅有限

还有些创意作品就不一一介绍了

留给大家自行去探索吧

北京冬奥组委文化活动部+新华社体育部+新华社新媒体中心:《快来! 领取你的专属冬奥雪花》

央视频:《数字雪花》

北京冬奥组委官网:《定制你的冬奥“春游照”》

北京冬奥组委官网:《88种运动等你解锁!》

科大讯飞:《下雪了!》

青岛啤酒:《让冬奥赛场响起你的加油声》

我们还有更多精美的H5案例和模板等你来参考,如果你也想用意派Epub360 H5编辑器制作一个H5,那就快快行动起来吧:

1.打开意派Epub360并登陆;

2.在工作台左侧点击创建一个新的空白作品,并开始尽情施展你的创意吧;

3.若在制作过程中遇到难题,请查看官网教程或咨询官方客服~

H5页面制作工具意派Epub360原创文章,如若转载请注明出处:https://www.epub360.com/blogs/article/620dc79e8843b44e79b61e82/

相关推荐
阅读 +