你的位置:首页 > 软件开发 > 网页设计 > 近期H5项目开发小结

近期H5项目开发小结

发布时间:2016-05-10 12:00:07
前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动)。主要是新品牌的推广需要,当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广;就主要的运用技术,页面优化,以及存在的短板做总结。一、主题与设计; 2个h5主 ...

前言:2016差不多又过了半啦,最近参与了公司好几个h5项目(严格来说,也只能算是推广页面活动)。主要是新品牌的推广需要,当然也有给公司以前老客户做的案例。今天主要总结下为新品牌开发的2个h5推广;就主要的运用技术,页面优化,以及存在的短板做总结。

一、主题与设计;

 2个h5主题主要与4.1愚人节与5月的母亲节做对应;然后要比较婉转自然地为新品牌作铺垫,自然推广是主要的目的,但是又不能那么直白明显;所以2个h5分别选择了虚拟产品介绍与游戏参与为设计思路;主要设计图如下:

 愚人节:近期H5项目开发小结     近期H5项目开发小结  扫描体验近期H5项目开发小结

母亲节:近期H5项目开发小结   近期H5项目开发小结  只能微信扫描体验近期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

H5
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。