阿迪达斯：Adidas Pro Athlete

2016-05-26 H5案例分享 H5案例分享

案例：Adidas Pro Athlete

出品：阿迪达斯

亮点：

策划上，图文展示类，整体H5场景采用图文页的形式展示，磨砂质感的黑色背景；主要分为两个维度，一：手指滑动下拉时X型翻页效果，与隐现的足球场图片形成错落有致的层次感，文案简洁有力；二：通过不同的角度，展现了阿迪达斯鞋子的样貌及性能；旨在宣传Adidas的两款新品足球鞋FW15X和Ace
设计上，翻页时X以及A字特效，时刻表现出鞋品特征，并且给人酷炫的感觉；在信息量较大的前提下，文案、视觉设计以及动态效果的完美配合并没有给人累赘或者炫技的感觉，而是很好的传递出了产品与足球运动本身的澎湃激情
交互上，翻页时，文案自动呈现在中央，让受众聚焦于内容；不同的角度看阿迪达斯鞋子，采用左右移动手机的方式
技术上，整体动画主要采用Canvas + TweenMax(动画框架) + CreateJS；左右移动手机看阿迪达斯鞋子采用的是html5的重力感应

技术实现： jQuery + TweenMax(动画框架) + CreateJS

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

识别图中二维码

Adidas Pro Athlete-查阅二维码

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

标签