淘宝:淘宝营销H5案例:淘宝造物节邀请函

2017-08-01 H5案例分享 H5案例分享
淘宝:淘宝营销H5案例:淘宝造物节邀请函

案例:淘宝营销H5案例:淘宝造物节邀请函

出品:淘宝

亮点:

案例:淘宝造物节邀请函

出品:淘宝

亮点:

  1. 创意上,淘宝营销案例,继“双11”“双12”后,淘宝又要为中国人创造新的节日:造物节。策划上,利用手机重力感应+360全景+动画技术,实现介绍“造物节”并在微信环境中发出对用户的“邀请”。“造未来”“造音造艺”“造原力”,每个主题都有四场活动介绍,内容极其丰富;顺带附有“购票密令”和“发送我的邀请函”,一个彩色导航菜单,清晰明了。

  2. 视觉上,大胆用色,四个主色打造炫酷全景漫画效果:造未来-科技场-蓝色;造音造艺-音乐艺术-红色;造原力-创业相关-紫色;购票、分享-淘宝色-橙色;

  3. 交互上,利用重力感应,用户转动手机查看全景;在旋转过程中,点击各提示点,进行页面交互;

  4. 文案上,内容丰富,主题明确,活动介绍清晰明了;细节上,pc端还做了简单适配,见文章末尾图。

  5. 技术上,图片格式采用base64,而不是使用普通的jpg/png24/png8/gif,提升了整体的加载速度,为下面采用CSS3视觉特效,做好性能上的铺垫;引入了css3d引擎, 下载地址如下:https://github.com/shrekshrek/css3d-engine,国人作品,效果极赞,分享给攻城师和程序媛们。

 



技术实现: Zepto + css3d-engine


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

识别图中二维码

淘宝营销H5案例:淘宝造物节邀请函-查阅二维码




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

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

【淘宝类】H5案例大汇总(干货精选)——2016大合集第31波

阿迪达斯h5宣传案例--胜势全开

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~