前提：

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

        }

        100% {

            transform: scale(1);

            opacity:;

        }

    }

    @-webkit-keyframes fadeIn {

        0% {

            -webkit-transform: scale(0);

            opacity: 0.0;

        }

        60% {

            -webkit-transform: scale(1.1);

        }

        80% {

            -webkit-transform: scale(0.9);

            opacity:;

        }

        100% {

            -webkit-transform: scale(1);

            opacity:;

        }

    }
.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:;

        }

        100% {

            transform: scale(1);

            opacity:;

        }

    }

    @-webkit-keyframes fadeIn {

        0% {

            -webkit-transform: scale(0);

            opacity: 0.0;

        }

        60% {

            -webkit-transform: scale(1.1);

        }

        80% {

            -webkit-transform: scale(0.9);

            opacity:;

        }

        100% {

            -webkit-transform: scale(1);

            opacity:;

        }

    }

该元素首先是隐藏的，在页面滑入视窗时将其显示，就会应用上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

全屏滚动效果H5FullscreenPage.js的更多相关文章

  1. pagePiling.js - 创建漂亮的全屏滚动效果

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  2. pagePiling.js - 创建美丽的全屏滚动效果

    在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...

  3. 手机端实现fullPage——全屏滚动效果

    封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1.  纯js实现,小巧轻便. 2.  兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1.  仅封装了基础功能,H ...

  4. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  5. 全屏滚动插件pagePiling.js

    全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...

  6. 六一广告页H5全屏滚动效果实现

    明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...

  7. 拥抱单页网站! jQuery全屏滚动插件fullPage.js

    不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...

  8. 学习 | jQuery全屏滚动插件FullPage.js

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...

  9. jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)

    1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...

随机推荐

  1. 安卓SeekBar

    public class Speak extends Fragment implements OnSeekBarChangeListener { private SeekBar bar1; priva ...

  2. HADOOP HA切换后出现ＭＳＳＩＮＧ　ＢＬＯＣＫ

    HDFS HA切换后missing block问题分析 今天因为调整一个NN的参数,所以切换一个ACTIVE的NN,发生了MISSING BLOCK. 怀疑可能是EDITLOG没有同步完成,可能是误报 ...

  3. oracle 倒库后insert id冲突的问题

    错误为:ORA-00001: unique constraint violated 把test库的数据导入到另一个库后,忘记修改自增id sequence的nextval了,因此,当前的数据库中数据和 ...

  4. winform/窗体鼠标事件编程中的几个问题

    1.进行.net窗体的开发,经常用到鼠标事件,如MouseDown/MouseUp/MouseMove/MouseClick等.可是有时候给控件添加鼠标事件,就是不响应,怎么办呢! 答案:1.控件是否 ...

  5. 第1章 重构，第一个案例（1）：糟糕的statement函数设计

    1. 启航:影片出租,计算每一位顾客的消费金额并打印清单 1.1 场景说明: (1)影片分类规则:普通片.儿童片和新片等3类 (2)每种影片计算租金的方式. ①普通片:基本租金为2元,超过2天的部分每 ...

  6. 嵌入式Linux驱动学习之路(十九)触摸屏驱动、tslib测试

    触摸屏使用流程: 1. 按下产生中断. 2.在中断处理程序中启动AD转换XY坐标. 3.AD转换结束并产生AD中断. 4. 在AD的中断处理函数中上报信息,启动定时器. 5. 定时器时间到后进入中断, ...

  7. a href=#与 a href=javascript:void(0) 的区别

    a href="#"> 点击链接后,页面会向上滚到页首,# 默认锚点为 #TOP <a href="javascript:void(0)" onCl ...

  8. C#基础系列——再也不用担心面试官问我“事件”了

    前言:作为.Net攻城狮,你面试过程中是否遇到过这样的问题呢:什么是事件?事件和委托的区别?既然事件作为一种特殊的委托,那么它的优势如何体现?诸如此类...你是否也曾经被问到过?你又是否都答出来了呢? ...

  9. DbUtility v3

    DbUtility v3 历史 七年前,也就是2007年,我在博客园写了一篇博文,开源并发布了恐怕是我第一个开源项目,DbUtility.其设计的初衷就是为了简化ADO.NET繁琐的数据库访问过程,提 ...

  10. SQLite剖析之数据类型

    许多SQL数据库引擎(除SQLite之外的各种SQL数据库引擎)使用静态.严格的数据类型.对于静态类型,一个值的数据类型由它的容器,即存储这个值的列来决定.SQLite则使用更加通用的动态类型系统.在 ...