字节跳动:我……我被抖音背后的黑科技撩到了!

2018-09-12 H5案例分享 H5案例分享
字节跳动:我……我被抖音背后的黑科技撩到了!


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

识别图中二维码

我……我被抖音背后的黑科技撩到了!-查阅二维码

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


案例:我……我被抖音背后的黑科技撩到了!

出品:字节跳动

亮点:

1.创意定位,用抖音酷炫换装换场景的功能做由头,为9月15日举行的抖音技术开放日做宣传推广。

 

2.策划上,首先一段10秒钟的视频,主角是字节跳动AI Lab算法工程师,代号93,向观看H5的用户做自我介绍,并引导进入抖音背后的黑科技。

 

 

用户在任意时间点击屏幕,都在“现实世界”“AI世界”“抖音世界”三个场景中随意切换。切换时只改变背景和装饰元素,视频主体不变,以给用户带来“穿越”的感觉。这里是一段1分13秒的视频,主要是主角工作环境等介绍。这其中的亮点,就是无论何时点击屏幕,都可以“穿越”进入到不同时空。

 

3.设计上,每个世界都有该场景的象征性元素,科技感强烈。

 

4.体验上,有点乱,部分场景变化太快,第一次看这个作品没玩明白。

 

5.技术上,这支H5主要有两个MP4格式的视频构成。第一个视频为男主介绍,视频尺寸960*1854(换算为750像素宽度,尺寸为750*1448)。第二个视频为1920*1236(3个尺寸为640*1236,换算为750像素宽度,尺寸为750*1448),并列排列,合成一个视频。当用户点击屏幕,切换视频所在div容器left值,达到“穿越”的感觉。



技术实现: video



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

标签

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

相关推荐:

抖音:第一届文物戏精大会

广汽传祺:2008-2018穿越十年

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~