京东：不一样的全家福

2018-05-25 H5案例分享 H5案例分享

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

识别图中二维码

不一样的全家福-查阅二维码

完整欣赏此案例大约需要45秒

案例：不一样的全家福

出品：京东

亮点：

策划上，场景布置类H5，通过“我们的全家福，有点不一样”这个主题，用户自己选择场景元素，拖拖拽拽，生成一幅自己独一无二的全家福。我们聊聊这支H5的细节，在场景布置界面，一共有5组场景。第一组场景是整体大背景，一个有9个背景可供选择；第二组场景是孩子，首先需要选择男孩，还是女孩，选择了性别以后，还可以选择头部（脸部和头发）、衣服、玩具，在这里着重强调，这支H5，可以上传自己的照片，将自己脸部融入到卡通人物的脸部；第三组是父母，也是首先选择性别，而后，可以选择头部（脸部和头发）、衣服，这一组也是有将自己的照片上传功能；第四组是你喜欢的宠物，有各种卡通小狗和小鸟等；第五组是炫酷的字和修饰小图标。选择完毕，也拖拽到合适的位置，缩放到合适的大小，点击[完成]按钮，就合成了自己的专属全家福，长按可以保存图片。
设计上，卡通风格，偏文艺清新。这种风格我是很喜欢。
体验上，页面加载完毕，会提示播放时会有声音，可以选择是否播放背景音乐，这一点小五点赞，体验超好，窃喜，可以上班时间玩这支H5，不引起其他人的注意。

技术实现： pixi.js

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

标签