天猫：一起揭秘天猫情话工场

2017-11-06 H5案例分享 H5案例分享

案例：一起揭秘天猫情话工场

出品：天猫

亮点：

策划上，长图类，① 点击首屏按钮，来到天猫情话工场，点击大门进入1号厂房情话制造机出，一对情侣发射出一波波的爱情信号，爱情信号经接收器、诊断室、爱情发酵机、能量加持器后，在情话打印机处，打印出一份份情话；② 而后打印出一份份情话在2号厂房情话出版社里装订成一部部情话词典，点击情话词典，左右滑动欣赏不同的情话；③ 然后一部部情话词典在3号场房情话录音棚里，录制成一份份CD，包装成天猫情话工场天猫腕表眼睛出品的一份份包裹；④ 点击包裹，即可得到情话留声机的玩法，扫描二维码还可穿越到天猫腕表眼镜七夕盛会哦，最后是情话工场各大入驻品牌。
设计上，黑白漫画风格，场景主要采用黑白两色，简洁干净，里面的爱心、词典等元素采用红色，与黑白形成鲜明对比，让人们的注意力在不经意间就集中在爱心、词典等元素上。里面的小小搬运工采用的是天猫logo形象，不仅十分可爱，也在间接中加深了人们对天猫的印象。
技术上，点击打开词典后，左右滑动看不同的情话主要是采用JS滑屏组件Swiper来实现的。

技术实现： jQuery + Swiper

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

识别图中二维码

一起揭秘天猫情话工场-查阅二维码

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

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

标签