简豆科技：小五的语音情书

2017-02-08 H5案例分享 H5案例分享

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

识别图中二维码

小五的语音情书-查阅二维码

案例：小五的语音情书

出品：简豆科技

亮点：

策划上，图文展示案例。案例以小五的一封语音情书为主题展开。加载完成后进入首页，映入眼帘的是一份有爱心跳动的信封，点击进入页面后，会判断您是否关注h5案例分享公众号，如果没有关注需要识别二维码进入公众号，关注后在公众号上输入520，会发送给您这份语音情书，点击进入后会展开，像信一样缓缓展开，讲述了你从何时认识小五，与小五一起走了几天，小五会发出语音告诉你定级在什么段位名同时还会发送证书给你，证书将你的微信昵称以及相应的等级进行了合成，随后会有一个小调研哦，你2017年想与小五一起干什么？
设计上，手绘 + 矢量设计。画面背景以单色为主，突出案例内容，小五的

头像采用AI绘制，点击小五头像的时候可以改变小五的头像内容以及背景颜色。
体验上，加载还需要优化，整体播放流畅。新春佳节来临之际，小五给你了一份属于你的情书。

技术实现： jQuery + iScroll

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

标签