上汽大众：为别样生活出发

2016-09-07 H5案例分享 H5案例分享

案例：为别样生活出发

出品：上汽大众

亮点：

策划上，上下分屏+场景对比类，① 先采用三幅对比场景，场景对比利用镜像原理，采用上下分屏方式，上方的场景是展现了城市中无聊的生活，下方的场景展现了跟随上汽大众到大自然中体验别样生活；点击右下方按钮可将上下两个场景进行翻转切换；② 来到尾屏可选择Cross Santana、Cross Lavida、Cross Polo三款汽车中的任意一种，而后填写姓名手机号，预约试驾
设计上，清新淡雅的风格，采用淡灰色作为主色调，屏幕分上下两屏，城市场景与大自然的场景形成对比
技术上，翻转效果采用的是JS+CSS3的transform，右下角的按钮小图标和上下翻屏的提示箭头动效主要采用的是CSS3的animation

技术实现： jQuery

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

识别图中二维码

为别样生活出发-查阅二维码

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

标签