腾讯：腾讯科学WE大会

2019-11-04 H5案例分享 H5案例分享

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

识别图中二维码

腾讯科学WE大会-查阅二维码

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

案例：腾讯科学WE大会

品牌：腾讯

技术实现： pixi.js + tweenMax.js

亮点：

1、创意定位

以“把自己缩小十亿倍能看到什么”，拍摄显示中的照片，照片形成粒子效果，展示微观万物。案例整体为腾讯WE大会服务，依然是观看案例后，看网络直播。

2、策划上

① 首先是一小段视频，视频全长12秒，展示微观世界

② 而后引导用户拿起手机，拍下你想探索的事物，用户照片或者上传手机中的照片，展示分析界面，粒子效果生动立体的展示，用户还可以滑动屏幕，360°查看画面，这个粒子画面和你上传的照片有关。

③ 最后用户可以生成粒子小宇宙海报或预约腾讯WE大会直播

3、设计上

深色调，背景一直保持黑色，衬托出金色的粒子更耀眼，深色调本身还给用户一种神秘感。

4、技术上

粒子效果和粒子移动悬浮的动画使用的是pixi.js，配合greensock这个世界都超有名的动画平台；greensock中包含有TweenMax和TimelineMax。

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

标签