一个H5小项目

一个月前接了一个H5项目,是学校团委要求的,校方要求在已经制作好的H5基础上,增加一个点赞功能,这个点赞功能有具体要求,是一个举旗动画,然后说是第几第几个高举动画的人。
3天后我拿到了文案和已经做好的H5,学校又加需求,要在页面上做图片轮播效果。已经做好的H5是用第三方制作工具生成出来的,代码很乱,再加上H5设计的我觉得还有提升空间,索性自己重新写了一遍,正好有学长帮我美工,我们两个人说干就干。
我是第一次做这样的H5项目,之前只是朦胧的知道前端代码可实现而且不会很难,没亲自做过,秉承“先思考后编程”的原则,我对这个项目从下面几个角度简单分析:
1.一个H5需要哪些基本元素
预加载+页面切换动画+文字图片入场动画
2.基本元素功能该如何实现
预加载:new image对象,绑onload函数
动画:CSS动画和JS的脚本
页面切换:用zepto绑定touch事件
说做就做,每过一天第一个demo就完成了,但是存在好多问题。
1.页面切换后的回调函数问题
2.页面切换初始化动画
3.计时器清除不及时
4.页面滚动
然后又针对如上问题一一解决,回调函数重新绑定,舍弃计时器全部该用CSS操作,禁止body滚动等
后来校方又改了几次需求,终于在5.3完成了项目

你可能感兴趣的:(一个H5小项目)