<!DOCTYPE html>
<html><head>
<title>qqqqqqqq</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta content="telephone=no" name="format-detection" />
<link type="text/css" href="lib/normalize.css" rel="stylesheet"/>
<style>
body,#wrapper{min-height:100%;height:100%;overflow:hidden;}
#wrapper section{position:absolute;width:100%;height:100%;min-height:100%;}
section{top:100%;left:0;opacity:0;
}
section.active{top:0;z-index:2;opacity:1; /*transition:all 1s;*/}
section.pre{
-webkit-animation: pre 1s 1;
}
@-webkit-keyframes pre{
0%{top:0;opacity:1}
99%{top:-99%;opacity:1}
100%{top:-100%;opacity:0}
}
section.next{
-webkit-animation: next 1s 1;
}
@-webkit-keyframes next{
0%{top:100%;opacity:1;z-index:2;}
100%{top:0;opacity:1;z-index:2;}
}
.s1{background:#ccc;}
.s2{background:gold;}
.s3{background:pink;}
.s4{background:green;}
.swipeTip{position:absolute;width:3em;line-height:2em;bottom:0;left:0;right:0;margin:auto;z-index:10;text-align:center;
color:#fff;
background:#000;
border-radius:100%;
/**/-webkit-animation: st 1s infinite;
animation: st 1s infinite;
}
@-webkit-keyframes st{
0%{bottom:0;}
50%{bottom:0.8em;}
100%{bottom:0em;}
}
@keyframes st{
0%{bottom:0;}
50%{bottom:0.4em;}
100%{bottom:0em;}
}
</style>
</head>
<body onload="init()">
<div id="wrapper">
<section class="s1 active">
s1
</section>
<section class="s2">
s2
</section>
<section class="s3">
s3
</section>
<section class="s4">
s4
</section>
<div class="swipeTip" id="swipeTip">▲</div>
</div>
<script>
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}
function init(){
var sections = document.querySelectorAll("section");
var size = sections.length;
var index = 0;
var lock = false;
for(var i=0; i < size; i++){
PrefixedEvent(sections[i], "AnimationEnd", function(){
if(/next/.test(this.className)){
this.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"") + " active";
lock = false;
}else{
this.className = this.className.replace(/pre|next/g,"").replace(/\s*$/,"");
}
});
}
document.body.addEventListener("touchmove",function(e){
e.preventDefault();
},false);
var startX = 0;
var startY = 0;
var dx = 0;
var dy = 0;
document.getElementById("swipeTip").addEventListener("touchstart",function(e){
this.style.webkitAnimationPlayState = "paused";
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
});
document.getElementById("swipeTip").addEventListener("touchmove",function(e){
e.preventDefault();
dx = e.touches[0].pageX - startX;
dy = e.touches[0].pageY - startY;
});
document.getElementById("swipeTip").addEventListener("touchend",function(e){
this.style.webkitAnimationPlayState = "running";
if(lock){
return;
}
//垂直方向滚动的简单判断
if(Math.abs(dy) > Math.abs(dx)){
lock = true;
e.preventDefault();
sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " pre";
index++;
index = index % size;
sections[index].className = sections[index].className + " next";
}
},false);
}
</script>
</body></html>
分享到:
相关推荐
酷炫html5 css3全屏滚动动画专题模板演示页面
html5全屏滚动实例 完美实现全屏滚动带动画 包括横屏的滚动 各种实例
基于html5和css3响应式全屏滚动页面切换效果
一款基于CSS3/HTML5技术的全屏滚动相册,非常不错哦,看上去挺花哨的,左侧显示相册缩略图,右侧是显示大图片,看上去像是一款全屏显示的焦点图那样,不过应用的技术是HTML5,这也是当前的一大趋势,不过测试时候就...
支持手机端的CSS3全屏上下滚动视差特效JS代码,非常不错的JS特效代码,支持手机响应式和PC端 ,支持鼠标滚轮上下滚动,这种特效代码非常的流行,特别是在微信微场景的使用中,常见这种特 效代码,上下滚动加上CSS3...
全屏焦点7屏图片无滚动条,css3动画+html5特效,图片随鼠标移动而移动。每屏可随意添加div。兼容性好。
js css3全屏3D画布图片滑动切换效果代码 js css3全屏3D画布图片滑动切换效果代码
模仿360以前的全屏滚动版本,实现全屏滚动及滚动加载,实现transtion的css3动画效果~
这是一款使用html5和纯css3制作的响应式全屏滚动页面切换效果。该页面切换效果中页面底部有一排导航按钮,点击按钮时页面以上下平滑滚动的方式进行切换,整个页面始终保持100%的屏幕高度和宽度。
js css3页面滚动动画效果代码是一款CSS3全屏滚动插件效果。
支持手机端的CSS3全屏上下滚动视差特效JS代码,非常不错的JS特效代码,支持手机响应式和PC端 ,支持鼠标滚轮上下滚动,这种特效代码非常的流行,特别是在微信微场景的使用中,常见这种特 效代码,上下滚动加上CSS3...
html5 css3微信营销介绍页面全屏滚动模板.rar
全屏动态滚动特效是一款jquery css3实现的类似动画效果的全屏滚动特效代码。
这是一款效果非常炫酷jQuery和CSS3炫酷全屏垂直滚动切换幻灯片特效。该幻灯片特效采用全屏背景图片,使用鼠标滚动上下切换。鼠标放在屏幕左侧时,会打开所有图片的缩略图,点击可以直接跳转到相应的图片上。
css3微信营销介绍页面全屏滚动html5模板.zip
html5 css3微信营销介绍页面全屏滚动模板.zip
fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站 主要功能 • 支持鼠标滚动 • 支持前进后退和键盘控制 • 多个回调函数 • 支持手机、平板触摸事件 • 支持 CSS3 动画 • 支持...
javascript 全屏整屏滚动组件fullPage ,结合 css3的各种效果
jQuery CSS3全屏垂直翻页代码是一款带过渡效果的全屏垂直翻页特效插件,该全屏翻页插件在页面上下滚动时一次翻一屏,并带有CSS3过渡动画效果。