全屏滚动效果H5FullscreenPage.js

前提：

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

功能清单:

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

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

3 支持配置音乐功能。

4 支持摇一摇接口功能。

组件核心代码原理：

1 页面滚动

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

<body>
  <div class="item item1">
             
  </div>
  <div class="item item2">
             
  </div>
  <div class="item item3">
             
  </div>
</body>

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

.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center;
}

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

function touchStart(event) {
            if (dragStart !== null) return;
             
            if (event.touches) {
                event = event.touches[0];
            }
             //抓取时的所在位置
            dragStart = event.clientY;
 
         }
           
         function touchMove (event) {
             
            if (dragStart === null) return;
 
            if (event.touches) {
                event = event.touches[0];
            }
             //得到抓取开始时于进行中的差值的百分比
            percentage = (dragStart - event.clientY) / window.screen.height;//和屏幕高度做比较
              
            if (percentage > 0) {
                // //向上拖动
                var translateY = 1 - 0.4*percentage;//位置系数，可以微调
                $(event.target).next().css('-webkit-transform', 'translateY('+translateY*100+'%)'); //下一个item上移动
                  
            } else {
                //向下拖动
                var translateY = -(0.4*percentage);
                $(event.target).css('-webkit-transform', 'translateY('+translateY*100+'%)');//当前item下移动
            }
             
         }
           
         function touchEnd (event) {
             
            dragStart = null;//标志位值空
             
             
            //抓取停止后，根据临界值做相应判断
            if (percentage >= dragThreshold) {//向下滚动
                $(event.target).css('-webkit-transform', 'translateY(-100%)'); 
                $(event.target).next().css('-webkit-transform', 'translateY(0)');
            } else if ( Math.abs(percentage) >= dragThreshold ) {//向上滚动
                $(event.target).css('-webkit-transform', 'translateY(100%)');
            } else {//没有达到临界值 恢复原样
                $(event.target).next().css('-webkit-transform', 'translateY(100%)'); 
            }
             //重置percentage
            percentage = 0;
 
         }

这里有几点说明一下：

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

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

2 元素的淡入淡出：

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

.fadeIn {
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn; 
 
        animation-duration: 1.5s;   
        -webkit-animation-duration: 1.5s;
 
        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     
 
         
    }
@keyframes fadeIn {
        0% {
            transform: scale(0);
            opacity: 0.0;       
        }
        60% {
            transform: scale(1.1);  
        }
        80% {
            transform: scale(0.9);
            opacity: 1; 
        }   
        100% {
            transform: scale(1);
            opacity: 1; 
        }       
    }
 
    @-webkit-keyframes fadeIn {
        0% {
            -webkit-transform: scale(0);
            opacity: 0.0;       
        }
        60% {
            -webkit-transform: scale(1.1);
        }
        80% {
            -webkit-transform: scale(0.9);
            opacity: 1; 
        }   
        100% {
            -webkit-transform: scale(1);
            opacity: 1; 
        }       
    }

.fadeIn {
        animation-name: fadeIn;
        -webkit-animation-name: fadeIn; 
 
        animation-duration: 1.5s;   
        -webkit-animation-duration: 1.5s;
 
        animation-timing-function: ease-in-out; 
        -webkit-animation-timing-function: ease-in-out;     
 
         
    }
@keyframes fadeIn {
        0% {
            transform: scale(0);
            opacity: 0.0;       
        }
        60% {
            transform: scale(1.1);  
        }
        80% {
            transform: scale(0.9);
            opacity: 1; 
        }   
        100% {
            transform: scale(1);
            opacity: 1; 
        }       
    }
 
    @-webkit-keyframes fadeIn {
        0% {
            -webkit-transform: scale(0);
            opacity: 0.0;       
        }
        60% {
            -webkit-transform: scale(1.1);
        }
        80% {
            -webkit-transform: scale(0.9);
            opacity: 1; 
        }   
        100% {
            -webkit-transform: scale(1);
            opacity: 1; 
        }       
    }

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

组件使用方法：

 组件使用方法：

{
    'type' : 1,//翻页的动画效果 共有8种可以使用
    'pageShow' : function(page){},
    'pageHide' : function(page){},
    'useShakeDevice' : {//是否使用手机摇一摇接口
        'speed' : 30,
        'callback' : function(page){}
    },
    'useParallax' : true,//是否使用parallax效果可参看demo第六页
    'useArrow' : true,//是否使用箭头
    'useAnimation' : true,//是否使用元素动画效果
    'useMusic' : {//是否使用音乐
        'autoPlay' : true,
        'loopPlay' : true,
        'src' : 'http://mat1.gtimg.com/news/2015/love/FadeAway.mp3'
    }
 };

原文地址：https://github.com/lvming6816077/H5FullscreenPage

posted @ 2015-04-29 22:50 一点点白阅读(5123) 评论(0) 编辑收藏举报

刷新页面返回顶部

全屏滚动效果H5FullscreenPage.js

公告