前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动)。主要是新品牌的推广需要,当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广;就主要的运用技术,页面优化,以及存在的短板做总结。一、主题与设计; 2个h5主 ...
前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动)。主要是新品牌的推广需要,当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广;就主要的运用技术,页面优化,以及存在的短板做总结。
一、主题与设计;
2个h5主题主要与4.1愚人节与5月的母亲节做对应;然后要比较婉转自然地为新品牌作铺垫,自然推广是主要的目的,但是又不能那么直白明显;所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路;主要设计图如下:
愚人节: 扫描体验;
母亲节: 只能微信扫描体验
2个h5 分别以流程展示和游戏互动参与为操作主线进行,在最后通过时节的特点(愚人节自然是整蛊咯,母亲节则是温馨情感)导向品牌网站。个人对UI的整体设计还是比较认可的。
一、主要的技术点与亮点;
两个h5的UE交互比较相似,所以在技术层面上也比较贴切。整体没有太大的难度,与之前开发的H5互动页面技术采用差别不大;不过创意总是无限的,根据设计师的设计理念,并与之交流后确定的交互展示方式算得上是这2个h5的一大亮点。围绕效果对采用的技术作分析总结。
1.重力感应动画效果,摇一摇;
项目里已不是第一次运用html5手机api,时至今日,几乎所有智能手机都很好地支持了DeviceOrientation 和DeviceMotion 这个2个手机接口;根据设计配合了css3的transform动画,营造了视觉差的效果;代码实现也是比较简单,单纯地调用接口代码即可;至于摇一摇动能,之前的文章也有提到过,so,不复赘述。
window.addEventListener('deviceorientation', function(e) { var x = parseInt(e.gamma); var w = parseInt(0.4*x); if(Math.abs(x) < 80){ $('.p0_cen').css('webkitTransform',' translate3d('+0.8*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) '); $('.p0_tip').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) '); if($('.p1').hasClass('on')){ //p1 $('.p1_bg').css('webkitTransform','translate3d('+1.5*w+'px,0px,-100px) rotate3d(0,1,0,' + 0.8*w + 'deg) scale(1.5)'); $('.p1_tit1').css('webkitTransform',' translate3d('+1.4*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) '); $('.p1_tit2').css('webkitTransform',' translate3d('+1*w+'px,0px,0) rotate3d(0,1,0,' + 1.5*w + 'deg) '); $('.p1_tit3').css('webkitTransform',' translate3d('+1.2*w+'px,0px,0) rotate3d(0,1,0,' + 1.2*w + 'deg) '); $('.p1_tit4').css('webkitTransform',' translate3d('+.7*w+'px,0px,0) rotate3d(0,1,0,' + 1*w + 'deg) '); $('.p1_bot').css('webkitTransform',' translate3d('+2*w+'px,0px,0) rotate3d(0,1,0,' + 0.6*w + 'deg) '); }; };});
原标题:近期H5项目开发小结
关键词:H5
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。