华为主题&华为音乐&颐和园:爱卿,朕已在颐和园等候你多时了

2019-07-12 H5案例分享 H5案例分享
华为主题&华为音乐&颐和园:爱卿,朕已在颐和园等候你多时了


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

爱卿,朕已在颐和园等候你多时了-查阅二维码

完整欣赏此案例大约需要一分三十秒


案例:爱卿,朕已在颐和园等候你多时了

品牌:华为主题&华为音乐&颐和园

亮点:

 1.创意定位

华为主题&华为音乐&三山五园颐和园推出的一款3D全景类的h5,用户不仅能看到充满仙气的画风,还可以听到明星为你讲解颐和园的景点。

 

 2.策划逻辑

 

  • ①Loading部分:

中间一只孔雀飞过,,下面是进度加载条。最底下是华为主题、华为音乐和颐和园的LOGO。

 

  • ②内容动画部分:

进入首页先输入你的昵称,然后点击确定。一个推进的动画后,进入全景页面,弹出一个提示框介皇家园林,点击下方立即探索,弹出提示框“360°滑动查看全景”,你会看到佛香阁、乐寿堂、十七孔桥、清晏舫、画中游、听鹂馆、秋水亭这些建筑,点击其中一个你可以听不同的明星为你讲解,下方是邀请好友共同欣赏,下载颐和园壁纸,收听更多明星讲解。回到全景页面,最底下有一个拍照按钮,点击它。每个地点下方点击后,会出现动画或者是一个小挑战的问题。

 

  • ③落地页:

页面左上角是拍照的地点名称,右上角是你的昵称,恭喜你幸运地成为第多少位,打卡“梦境颐和园的人”。中间是你拍照的地点,左下有皇帝表情包的插图和一段话,右下角是可以继续游览,晒一晒。

  3.设计上

 

整体色彩丰富,清新明亮,还有会飞的仙鹤陪你一起游览。

 

  4.体验上

交互动作很多,让用户身临其境,乐在其中。不仅能学到知识,还能游戏玩乐。



技术实现: html5



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

相宜本草:娘娘的秘钥

华为主题:末日逃亡测试,揭秘你体内隐藏的个性DNA

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~