墨迹天气：天气改变命运

2016-08-08 H5案例分享 H5案例分享

案例：天气改变命运

出品：墨迹天气

亮点：

策划上，游戏类，紧跟热点话题“里约奥运会”① 先左右滑动，选择奏响命运之歌的地点：大白杨痛失金牌里约热内卢奥林匹克水上运动中心or马拉卡纳体育场，点击“靠你奏响命运之歌”，开启奏歌之旅；②选择代表不同的天气及声音的黄、绿、蓝三色音符，拖到白色透明音符区域，排列天气音符，随你玩唱命运；③生成排列好音符生成的生动好玩的动效，来用天气改变命运，并配上墨迹天气奥运之歌；④ 点击尾屏“明日天命”，即可查看明日里约热内卢天气，想赢空气果的小伙伴，要先下载墨迹天气
设计上，漫画风格，① 采用绿色作为主色调，辅以黄色和蓝色；② 文字和按钮多采用立体透明水晶风格，看起来精致清爽；③ 大白杨漫画肖像和漫画巴西耶稣神像动态图好有趣啊~
技术上，首屏动画采用的CSS3中animation的steps方式通过改变background-position背景定位，做的逐帧动画
传播上，紧抓时下热点“里约奥运会”，并将大白杨痛失金牌热点新闻与天气联系起来，自然而然的联系到墨迹天气，极易抓人眼球，迅速传播，扩大影响力，从而达到其宣传目的

技术实现： JavaScript

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

识别图中二维码

天气改变命运-查阅二维码

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

标签