腾讯视频：订制专属于你的小哥哥壁纸

2018-08-03 H5案例分享 H5案例分享

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

识别图中二维码

订制专属于你的小哥哥壁纸-查阅二维码

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

案例：订制专属于你的小哥哥壁纸

出品：腾讯视频

亮点：

策划上，腾讯视频《明日之子》节目，以“订制专属于你的小哥哥壁纸”为核心，通过用户DIY生成专属壁纸。一共有5组元素可以选择，第一组为10个小哥哥人物的头像，第二组为11个背景图，第三组为5个slogan，第四组为14个萌萌的贴图，第五组为17个表情卡通贴图。点击相机按钮，生成自己的专属小哥哥壁纸。
设计上，采用真实的人物头像，最后合成的海报更偏向于商业人物海报。
交互上，前三组元素都是唯一选择；后两组可以反复添加元素。后两组的元素，添加后，可以移动和删除，元素左上角貌似想缩放按钮的图标，缩放功能是失效，不知为何用。

技术实现： hammerjs + html2canvas

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

标签