雀巢&&天猫全球狂欢节：你的妈妈力有多神奇？

2018-01-15 H5案例分享 H5案例分享

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

识别图中二维码

你的妈妈力有多神奇？-查阅二维码

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

案例：你的妈妈力有多神奇？

出品：雀巢&&天猫全球狂欢节

亮点：

策划上，活动流程类，首先介绍秀个人妈咪包活动的规则及奖品，参与活动（至少选择四类妈咪包中经常放的物品，并输入至少十个字的妈妈力宣言），页面显示系统统计的物品数量、重量和妈妈力宣言，生成雀巢母婴用户中心会员页的淘口令，进入天猫领取奖品，也可以链接进入新浪微博，分享并关注参与抽奖活动。品牌宣传直观到位，每一屏均显示品牌的图标。
设计上，紫色的基调，配有妈咪包等物品的实物图，图文并茂，简约大方。
交互上,以“点击”完成次活动的流程，妈妈力宣言页配有滑动效果，可查看宣言实例，也可弹出输入框自行输入。
技术上，使用了CSS3的animation属性实现了淡入淡出等动画效果；使用js实现了选中信息的复制粘贴；jQuary实现了对数据信息的绑定与计算。

技术实现： jQuery.js+loader.js+clipboard.js

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

标签