京东:时尚生活体验馆
案例演示,请长按/扫描以下二维码 ->
识别图中二维码
完整欣赏此案例大约需要5分钟
案例:时尚生活体验馆
出品:京东
亮点:
- 策划上,通过8个家居场景,展示时尚生活体验馆的种种可能。首先是一个有桌子、椅子和电视的家,点击桌子上的遥控器,电视放大,穿越到电视里,出现8个不同风格的家居场景,每个场景都有几个不同的商品穿插其中,不仅展示出了物品的实际用途,也使画面更具一体感。滑动对应的屏幕,卡通人物主人公,以第一人称或者第三人称的角度,讲述事故,为当前家居讲述背后的故事,可以点击当前场景的右下角“完整故事”按钮,听完整故事。这种带入感,让每个场景的物品,都附有了存在感,乐意点击进入,查看物品的细节和购买链接。可能是与每个场景主人公的叙述有共鸣,也可能是喜欢当前场景的布置画面,希望自己的家,也这么美。
- 设计上,手绘卡通风格,画面细腻,很有高级感。尤其喜欢第一个场景中的美女和第八个场景中老奶奶和猫。
- 技术上,每个场景的主人公动画,使用CSS3动画实现。音频上,每个音频都是一个audio标签,达到了预加载,这样,播放音频时,不会有卡顿。
- 体验上,横屏观看,既支持横向锁屏观看,也支持自然横屏观看。8个场景中,可以滑动屏幕慢慢观看,也可以点击左右箭头,快速切换到上一个或者下一个场景。每个场景采用内容独白的方式,每一个小故事都有专业的声优配音,并通过点击的方式显示完整的故事背景,使得每个故事中的人物都更为鲜活,引发用户的探索欲望。虽然是引导用户在京东购物,但是这样方式,不生硬,像是朋友推荐的感觉。
技术实现: Vue.js + jQuery
以上为“H5案例分享”团队原创文章,转载请注明出处!
标签
关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~
微信扫一扫
关注该公众号