TAT.tennylv 全屏滚动效果H5FullscreenPage.js
In 作品 on 2015年04月21日 by view: 11,141
23

前提:

介于现在很多活动都使用了 类似全屏滚动效果 尤其在微信里面 我自己开发了一个快速构建 此类项目的控件 与市面上大部分控件不同的是此控件还支持元素的动画效果 并提供多种元素效果 基于zepto.js 

功能清单:

1 快速实现页面全屏滚动效果。并提供多种翻页效果,兼容大部分ios和android系统。

2 支持在页面中添加多种动画元素效果 来实现淡入,滑入等效果。

3 支持配置音乐功能。

4 支持摇一摇接口功能。

组件核心代码原理:

1 页面滚动

 在移动页面上如果想使用滚动,如过没有任何动画效果,那么肯定大家首先想到的就是用滚动条来滚动,但这样的滚动比较单调,实现动画效果比较困难,于是就想出了利用css3和div的绝对定位来实现。

然后给每个div设置绝对定位样式

这样页面上的每个div都相当于一个页面 只不过重叠了而已,接下来就要利用javascript和css让这些页面可以滚动(利用touch时间改变div的transform来实现滚动)

这里有几点说明一下:

1)使用translate3d来替换translateY可以开启硬件加速 在渲染上会好一些。

2)在执行下一页或者上一页时 可以给div添加css3动画来使其滚动带有一定的动画效果,组件提供8中翻页效果。

 

2 元素的淡入淡出:

元素入场的动画效果主要是利用css3来实现

该元素首先是隐藏的,在页面滑入视窗时将其显示,就会应用上css3设定的动画效果,延伸出来不仅fadeIn效果,许多效果都可以设定,另外可以给元素添加data-delay属性来控制元素的执行顺序。

 

组件使用方法:

几种效果的预览:

      

 

相关文档和说明:

更详细的文档可以查看:http://lvming6816077.github.io/H5FullscreenPage/

后续会对这个组件增加一些新的功能 例如增加canvas涂抹元素和可拖拽元素等等,如果大家有好的建议也可以留言。

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/04/quan-ping-gun-dong-xiao-guo-h5fullscreenpage-js/

  1. 赵明燕 2016 年 12 月 2 日

    在没有浏览器缓存时,通过捕捉页面加载画面,可以看到所有的iterm,即从第一页到最后一页会快速的过一遍,再从最后一页,回到第一页,这个问题要怎样解决 ?

  2. 贺赫赫 2016 年 8 月 2 日

    demo 的音乐怎么换?

    • 赵明燕 2016 年 12 月 2 日

      H5FullscreenPage.init( { ‘type’:2, ‘pageShow’ : function(dom){ }, ‘pageHide’ : function(dom){ }, ‘useMusic’ : {//是否使用音乐 ‘autoPlay’ : false, ‘loopPlay’ : false, ‘src’ : ” } });在最后一项useMusic那里的src 写上音乐的路径

  3. 智取小师妹 2016 年 7 月 6 日

    用这个组件没找到向上滑动和向下滑动时的回调,然后自己扩展了下(主要是想 向上 或者 向下 滑动的时候想改变当前场景的背景色):找到 percentage = (dragStart – event.clientY) / window.screen.height;// if (percentage > 0) { // //向上拖动添加:opt.up.call(this,arguments);找到 } else if (item.prev()) {添加:opt.down.call(this,arguments);//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////前台调用增加新参数:’up’:function(Touch){ //向上滑动时触发 }, ‘down’:function(Touch){ //向下滑动时触发 }还有一件事是求楼主能够拉我进AlloyTeam公众群,我申请了快1年了,没人搭理我,555555555~~

  4. 小月博客 2016 年 1 月 21 日

    还真不错,现在很流行这个

  5. Yang 2016 年 1 月 5 日

    ‘pageShow’ : function(page){} 这个 page 参数怎么用?

  6. 姚仔 2015 年 9 月 18 日

    但是返回在执行都不行了 ! 求大神们指点啊!

  7. 2015年4 | 一世浮华一场空 2015 年 7 月 6 日

    […] 全屏滚动效果H5FullscreenPage.js […]

  8. 2015年4 - 编程技术分享 2015 年 7 月 6 日

    […] 全屏滚动效果H5FullscreenPage.js […]

  9. 2015年4 - java技术分享 2015 年 7 月 6 日

    […] 全屏滚动效果H5FullscreenPage.js […]

  10. 2015年4 - php技术分享 2015 年 7 月 6 日

    […] 全屏滚动效果H5FullscreenPage.js […]

  11. 2015年4-6月-前端开发月刊 – 豪情 | 查问题 2015 年 7 月 6 日

    […] 全屏滚动效果H5FullscreenPage.js […]

  12. TAT.tennylv

    吕鸣 2015 年 7 月 1 日

    我用魅族看看

  13. TAT.tennylv

    吕鸣 2015 年 7 月 1 日

    我看下

  14. 陌哥 2015 年 7 月 1 日

    小米note,原生浏览器没问题,微信浏览器只能划第一屏,后面就划不动了

  15. slert 2015 年 5 月 13 日

    在我的锤子手机上划不动

  16. 野菜 2015 年 5 月 13 日

    不兼容魅族浏览器,要哭了,赶项目还得好好研究一下TOT

  17. godLike 2015 年 4 月 22 日

    收藏了.

  18. tcdona 2015 年 4 月 22 日

    感谢分享,参考 zxx 的切屏动画库 http://www.mobilebone.org/

    我发现其实这类动画应该抽象成更通用的动画组件,分为 [[in,out],reverse]的组合状态,即:每个页面是有进入退出和返回状态的。

    还需要组件化可以随时按需要装卸

    • TAT.tennylv

      TAT.tennylv 2015 年 4 月 22 日

      ‘pageShow’ : function(page){},当执行完一次翻页操作时,当前页面进入屏幕完成时触发的方法
      ‘pageHide’ : function(page){},当执行完一次翻页操作时,上一个当前页面离开屏幕时触发的方法
      可以标识页面的状态

发表评论