网易新闻|网易汽车|AUTO直播|严选好车：来搞场大直播

2018-04-27 H5案例分享 H5案例分享

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

识别图中二维码

来搞场大直播-查阅二维码

完整欣赏此案例大约需要2分10秒

案例：来搞场大直播

出品：网易新闻|网易汽车|AUTO直播|严选好车

亮点：

策划上，视频类+测试类+人脸融合类+长图类。加载完成后，首页要求用户输入姓名、性别、购车类型，完成后点击“开启买买买之路”，进入下一页，上传用户头像，此时页面上方出现一条来自网易新闻的消息“北京车展突发消息！网易......”，点击消息，进入一小段视频“这里是北京车站的直播...”，视频停止，页面显示“前方信号较弱，请观看下方图文直播”，点击页面下方的“新消息”，进入一张长图，画面展示车展的详细消息（车型为首页所选），页面会显示用户头像的人脸融合图片。页面下方有三个按钮，引导用户分享、进入“生活去向测试仪”测试（此部分有八个测试题，声音相关，不再详细说明）或者进入网易新闻2018北京车展频道。
设计上，加载页面以及首页、上传图片页面使用动画风格；页面模拟手机操作画面，直播画面；画面的转换出人意料，让人印象深刻。
交互上，点击屏幕提示按钮，视频继续播放+上传图片。
技术上，使用css实现页面的动画效果；cropper.js实现了图片的裁剪与上传。
体验上，这个H5使用了多种风格，视频、人脸融合...其中模拟直播，并信号终端的设计，出人意料，小五一度以为自己手机出了问题，创意很棒。

技术实现： jQuery.js+video+cropper.js

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

标签