搜狐首页 科技 无心法师

手机搜狐

SOHU.COM

【H5案例分享】优酷H5基因链——改变正在发生

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

出品:优酷

亮点:

  1. 策划上,动画+视频类。①首屏以显微镜进行观察作为启动设定,点击图标后场景过度到DNA的双螺旋结构,表达了主题:许多事情正在发生着质的改变,优酷将会带领你去探索;② 点击优酷APP图标开始进行视频播放,通过10件以前与现在的前后对比,结合10个APP,再次照应10年改变的主题,例如“以前的频道枯燥单调,现在优酷让试听精彩多元”等。

  2. 设计上,鼠绘扁平风格,采用优酷经典色红色和蓝色作为主色调,元素多采用圆形样式。当然,案例中必不可少的还有优酷的新Logo

  3. 技术上,首页动画采用的是用CSS定位雪碧图上不同状态的图片,而后通过JS动态控制div出现的顺序,形成序列帧动画效果;其他动画主要是采用的Video视频

技术实现:jQuery + Video视频

案例赏析链接:

新的一年

你准备做出什么改变

小五准备买一个美美的防霾口罩

...

以上为【H5案例分享】团队原创文章!

转载请务必注明出处!

优酷】相关H5案例推荐:

  1. 优酷:优酷9周年

  2. 一支H5解析“Youku优酷”为神马换Logo

找优秀H5案例上h5-share.com

精选