全屏滚动效果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:;
}
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的更多相关文章
- pagePiling.js - 创建漂亮的全屏滚动效果
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- pagePiling.js - 创建美丽的全屏滚动效果
在线演示 在线演示 本地下载 全屏滚动效果是近期很流行的网页设计形式,带给用户良好的视觉和交互体验. pagePiling.js 这款jQuery插件能够帮助前端开发者轻松实现这样的效果.支持全部的主 ...
- 手机端实现fullPage——全屏滚动效果
封装了一个小插件模拟fullPage的全屏滚动效果,比较简单. 特点: 1. 纯js实现,小巧轻便. 2. 兼容性好.苹果.安卓都没问题,暂时没遇到问题机型. 缺点: 1. 仅封装了基础功能,H ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- 全屏滚动插件pagePiling.js
全屏滚动效果是最近非常流行的网页设计形式,带给用户良好的视觉和交互体验.pagePiling.js 这款 jQuery 插件可以帮助前端开发人员轻松实现这种效果.支持所有的主流浏览器,包括IE8+,支 ...
- 六一广告页H5全屏滚动效果实现
明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...
- 拥抱单页网站! jQuery全屏滚动插件fullPage.js
不知道从什么时候开始,单页网站就悄悄走进人们的视线,尤其是国外的网站,更是钟爱单页网站.制作一个全屏滚动的效果,然后每个滚动页弄一个好看的背景色,配上一些描述性的文字,大家都喜欢这么弄,仿佛逼格瞬间可 ...
- 学习 | jQuery全屏滚动插件FullPage.js
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站. 主要功能 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 C ...
- jQuery全屏滚动插件fullPage.js使用中遇到的问题(滑动轮播效果无效)
1.fullPage.js是什么? fullPage.js 是一个基于 jQuery ,用来制作全屏网站的插件. 2.兼容性: - jquery兼容:兼容 jQuery 1.7+ - 浏览器兼容: I ...
随机推荐
- Web报表工具FineReport的JS API开发（二）
上次介绍FineReport的JS API中的第一类开发--FR,这次就来介绍一下FS和contentWindow类的开发. 1 FS FS是数据决策系统中的js接口,比如说FS.tabPane.ad ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- UVALive 4426 Blast the Enemy! --求多边形重心
题意:求一个不规则简单多边形的重心. 解法:多边形的重心就是所有三角形的重心对面积的加权平均数. 关于求多边形重心的文章: 求多边形重心 用叉积搞一搞就行了. 代码: #include <ios ...
- UDP
我们通过以下代码来连了解以下UPD 首先我们先创建Server类 package cn.a.qwe; import java.net.DatagramPacket; import java.net.D ...
- java异常面试题
1.try{}里有一个return语句,那么紧跟在这个try后的finally {}里的code会不会被执行,什么时候被执行,在return前还是后? 也许你的答案是在return之前,但往更细地说, ...
- P1774 最接近神的人_NOI导刊2010[树状数组 逆序对 离散化]
题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...
- Spring 事务
实现购买股票案例: 一.引入JAR文件: 二.开始搭建分层架构---创建账户(Account)和股票(Stock)实体类 Account: 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- Oracle trunc()函数的用法
Oracle trunc()函数的用法 /**************日期********************/1.select trunc(sysdate) from dual --2013-0 ...
- Dell xps 13 9350待机时总是关机的处理方法
现象: 年初买的dell xps13 9350,最近可能是由于win10做了一些更新,每次睡眠就自动关机了,重启很多次,修改电源选项都没用, 原因分析: 在网上搜了一下,有人发现xps15 9350也 ...
- 读书笔记---PMBOK第五版官方中文版
以下是为了准备PMP考试时学习<PMBOK第五版官方中文版>这本书的笔记和摘要,目的是为了以后可以快速的抓住本书的核心重点复习. 引论 PMPOK的目的 收录了项目管理知识体系中被普遍认可 ...