冈本:宫本武藏の极致征途

2017-06-19 H5案例分享 H5案例分享
冈本:宫本武藏の极致征途

案例:宫本武藏の极致征途

出品:冈本

亮点:

  1. 策划上,图文漫画故事。案例以一镜到底的形式展现。讲述了主角,日本一代剑圣,“宫本武藏”在其武学征途上经历的各种遭遇以及挑战,最后到达巅峰。进入页面后,用户上滑屏幕,镜头就会向下移动。不停上滑,场景元素以及文字,会跟着在对应的位置淡入。结尾页将故事的核心“极致”融合到自身的产品上并引出相关活动,“六一八·买冈本”,用户点击“上京东买冈本”可以跳转京东。当然,还可以“分享极致征途”。

 

  1. 设计上,案例首屏便给出了准确的画面风格—“拼贴浮世绘”。画面中绝大多数元素都是按顺序单独出现,并且随着用户的滑动,场景元素会以不同的速率移动,从而产生视差效果,使得画面效果表现很赞。案例中,有一些人名等名词,如“蒲生大膳”等,设有红点标记,用户在观看故事过程,可以点击带标记的名词,会有弹出层出现,并对相应名词做出讲解,用户可以借此深入阅读日本文化。在“挥剑”、“打斗”等特定的场景下,还配有特定音效,进一步增强了案例的代入感。

 

  1. 体验上,内容非常完整,丰富,绝非快餐式的H5。有种在读日本版带画的武侠小说既视感。场面、对话、风景都设计的非常养眼,画面配色也不生硬。唯一觉得美中不足的,是小编在阅读时,不知道是不是因为内容太多,会有些许的卡顿。不过这个影响并不是很大。非常硬派、正经的武学故事,最后以“冈本”结尾,甚至在最后的主角对话中,还设置了“薄至无形”这样犹抱琵琶半遮面的伏笔,包括结尾页的背景画面,虽然有点辣眼睛,但是能逗人一乐还是蛮好的哈哈哈哈。



技术实现: CSS3(Transform)


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

识别图中二维码

宫本武藏の极致征途-查阅二维码




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

标签

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

相关推荐:

搜狗 冈本:看字!戴套的!

冈本:一片冈本可以换来什么?

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~