H5：大过年的，有什么话不能说

人物关系选择页是走马灯的最后一个画面，用户在这个页面选择TA要留言的人

用户选择了留言对象后，需要填写自己和对方的所在地，并给对方留言；用户完成留言后，H5会自动生成信件

【动效设计】

- Loading动画 -
火车票常常被用于寄托归家，相思，归心似箭等情感；因而带福回家H5的loading以火车票的形式展现，loading从1000KM向0KM加载，loading数字的缩小就是“我”与家距离的缩小；车票上显示的时间设定为用户打开H5的时间；车票上的小火车不知疲倦地前进，就是为了载着辛苦一年的人们早点回到家

- 走马灯动画 -
走马灯是传统节日玩具之一，属于灯笼的一种。常见于除夕、元宵、中秋等节日。H5以走马灯为载体，展现人们春节回家与父母、儿女、爱人、兄弟、闺蜜、恩师相聚的场景，之后顺势带出主题：大过年的，有什么话不能（对他们）说？

【插画设计】

每一个走马灯场景对应一副画，用户在选择了人物关系后，将从走马灯画面渐变成插画再过渡到填写页

- 微信传播用图 -

【技术实现】

loading使用css3动画重复播放实现
；走马灯式效果使用three.js 的3D轮播技术实现；控制轮播场景，获取场景索引，过渡下一场景；过渡效果使用css3动画模拟截屏效果；选择位置使用省市区联级；计算距离使用百度api获取公里数；结尾页根据之前使用的场景索引用canvas画布生成图片



【总结】

“大过年的，有什么话不能说”H5项目，从设计到前端开发到上线用时半月左右。是金六福年节品牌营销中的一环，将五星金六福与春节回家与亲人朋友喝杯酒说说心里话亲密关联，上线后引发了众多用户与亲友间温馨互动