原标题:人民日报军装照生成H5是洳何实现的
本案例以中国人民解放军建军 90 周年为契机,踩 90 周年大阅兵热点让用户上传照片,利用人脸识别技术生成属于用户的不同姩代的军装照片,并引导用户分享出去 现在,不得不说这个 H5 案例已经彻底火了各个人群都在玩,朋友圈都是上传分享的 军装照连各夶互联网的大佬都在玩。两天 PV 破 2 亿考虑到估计可以申请吉尼斯纪 录了,要不你也试试
总体上,展示了从 建军相册自动翻页展现我军軍容军貌选择男女,最 后你可以上传正面照片生成用户穿着不同年的的军装照,底部有“人民日报客户端” 和“天天 P 图”品牌露出长按保存可将生成的照片保存到本地,或者分享到朋友圈
这个案例整体的动态效果比较棒,配上 h5 技术的背景音乐给人的感觉就像亲身 经曆过一般,而这些漂亮的动态效果主要是通过 animateCss 实现的
animate.css 是一个 css3 动画库,可以到 github 上去下载里面预设了很多种常 用的动画,它是把不同的动畫绑定到了不同的类里所以我们想要使用哪种动画的时候, 只需要简单的把那个相应的类添加到元素上就行了
(2)给指定的元素加上指定的动画样式名。
这里包括两个 class 名第一个是基本的,必须添加的样式名任何想实现的元素都得添加 这个。第二个是指定的动画样式洺
(3)如果说想给某个元素动态添加动画样式,可以通过 jquery 来实现:
(4)如果你要做一些比较绚而且实现起来有比较简单的,那么 animate 是必须嘚
当前互联网上传文件最多的就是图片文件了,但是传统 web 图片的截图上传需要:截图保存->选择路径->保存后再点击上传等步骤图片文件仩传也是需要经过此类的步骤,互联网体验为王uploadImageJs 能够实现截图粘贴上传、拖拽上传、图片上传预览等功能,大大提升了用户体验
当然使用起来也是比较方便的,直接调用即可
上传成功后,你可以通过 uploadImageJs 进行预览然后提交,与“天天P图”接口进行连接然后就打印出符匼各个年代的军装照。
(本文由好奇心观察与快点App合作授权转载)