长隆旅游:保护动物,我在行动

2016-12-29 H5案例分享 H5案例分享
长隆旅游:保护动物,我在行动

案例:保护动物,我在行动

出品:长隆旅游

亮点:

  1. 策划上,动画类。载入完毕,点击开始传递进入动画展示部分,先后展示大熊猫、白虎等濒危珍稀动物,展示方式是碎片动画+陀螺仪,每个小动物都是很多个三角形碎片拼成,展示后会变成碎片散开,并出现介绍该动物的文字,接着在展示下个动物的时候碎片又会拼在一起,过程中还可以转动手机以陀螺仪的形式查看。展示完毕会总结长隆对保护动物贡献的力量,并在最后号召更多人一起热爱、保护动物。结尾页用户可以点击“成为志愿者”跳转外链,也可以“再看一遍”或“分享给好友”。

 

  1. 设计上,黑色铺底,白色字体,能突出内容又能体现话题的严肃性。碎片会根据动物的切换而变换颜色。碎片动画和文字进入、离开都以3D的形式展现。音乐选用了很多国外大片预告里都会采用的背景音乐——Guardians at the gate,风格豪迈壮阔,与使命感的主题非常搭。

 

  1. 体验上,可能是因为js本身对手机的压力就很大,所以如果手机性能稍微差点,观看它的时候流畅度就不会很好,第二遍进入会好些。小编觉得优化上也许可以更好。抛开这些,整体动画效果还是蛮炫酷的。



技术实现: Three.js + tween.js + jQuery


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

识别图中二维码

保护动物,我在行动-查阅二维码




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

标签

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

相关推荐:

腾讯公益:99公益,一起爱

保护濒危动物宣传h5---In Pieces - 30 Endangered Species, 30 Pieces.

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~