优酷：新优酷 | 改变正在发生

2017-01-04 H5案例分享 H5案例分享

案例：新优酷 | 改变正在发生

出品：优酷

亮点：

策划上，视频类，① 首屏以显微镜进行观察作为设定，点击后变成了DNA的双螺旋结构，表达了许多事情正在发生着质的改变，优酷将会带领你去探索；② 点击优酷APP图标开始进行视频播放，通过10件以前与现在的前后对比，表现出主题这个世界正在改变，例如以前的频道枯燥单调，现在优酷让试听精彩多元等。
设计上，漫画风格，采用优酷经典色红色和蓝色作为主色调，元素多采用圆形样式，当然啦，必不可少的还有优酷新换的logo。
技术上，首页动画采用的是用CSS定位雪碧图上不同状态的图片，而后通过JS动态控制div出现的顺序，形成序列帧动画效果；其他动画主要是采用的Video视频。

技术实现： jQuery + Video

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

识别图中二维码

新优酷 | 改变正在发生-查阅二维码

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

标签