简略的css3全屏滚动-左右方向
简单的css3全屏滚动-左右方向
据说 translateZ(0)可以触发GPU渲染，提高动画的性能。
切换的属性变化，可以有2种：
1. transform:translateX的值
2. left的值；
这里动画切换比较简单，看不出有什么优势。
二、采用translateX属性值控制容器位置：
二、采用left属性值控制容器位置：
据说 translateZ(0)可以触发GPU渲染，提高动画的性能。
切换的属性变化，可以有2种：
1. transform:translateX的值
2. left的值；
这里动画切换比较简单，看不出有什么优势。
二、采用translateX属性值控制容器位置：
<!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-x:hidden;/**/}
#wrapper section{position:absolute;width:100%;height:100%;min-height:100%;overflow:hidden;}
section{top:0;left:0;opacity:0;-webkit-transform:translate(100%,0,0);z-index:1;}
section.active{-webkit-transform:translateX(0);z-index:2;opacity:1; /*transition:all 1s;*/}
/*更改元素的display属性，一些浏览器会触发重新布局，导致里面滚动条回到顶部。
section.none{display:none;}*/
/*真正的内容容器*/
section .container{height:100%;overflow:auto;}
section.slideLeftPre{
-webkit-animation: slideLeftPre 1s 1;
}
@-webkit-keyframes slideLeftPre{
0%{-webkit-transform:translateX(0);opacity:1;z-index:2;}
99%{-webkit-transform:translateX(-99%);opacity:1;z-index:2;}
100%{-webkit-transform:translateX(-100%);opacity:0;z-index:2;}
}
section.slideLeftNext{
-webkit-animation: slideLeftNext 1s 1;
}
@-webkit-keyframes slideLeftNext{
0%{-webkit-transform:translateX(100%);opacity:1;z-index:2;}
100%{-webkit-transform:translateX(0);opacity:1;z-index:2;}
}
section.slideRightPre{
-webkit-animation: slideRightPre 1s 1;
}
@-webkit-keyframes slideRightPre{
0%{-webkit-transform:translateX(0);opacity:1;z-index:2;}
99%{-webkit-transform:translateX(99%);opacity:1;z-index:2;}
100%{-webkit-transform:translateX(100%);opacity:0;z-index:2;}
}
section.slideRightNext{
-webkit-animation: slideRightNext 1s 1;
}
@-webkit-keyframes slideRightNext{
0%{-webkit-transform:translateX(-100%);opacity:1;z-index:2;}
100%{-webkit-transform:translateX(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;}
}
.slideLeft,.slideRight{font-size:36px;}
</style>
</head>
<body onload="init()">
<div id="wrapper">
<section class="s1 active">
<div class="container">
<div style="border:1px solid red;height:1000px;">
<p>只是前面的一段文字</p>
<a href="#" class="slideLeft">向左</a>
<a href="#" class="slideRight">向右</a>
</div>
s1
<a href="#" class="slideLeft">向左</a>
<a href="#" class="slideRight">向右</a>
</div>
</section>
<section class="s2">
<div class="container">
<div style="border:1px solid blue;height:300px;">我是S2 </div>
s2<a href="#" class="slideLeft">向左</a>
<a href="#" class="slideRight">向右</a>
</div>
</section>
<section class="s3">
<div class="container">
s3<a href="#" class="slideLeft">向左</a>
<a href="#" class="slideRight">向右</a>
</div>
</section>
<section class="s4">
<div class="container">
s4<a href="#" class="slideLeft">向左</a>
<a href="#" class="slideRight">向右</a>
</div>
</section>
</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);
}
}
var UID = (function(){
var id = new Date().getTime();
return function(){
return id++;
}
})();
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(){
var cls = "";
if(/Next/.test(this.className)){
cls = " active";
lock = false;
}else{
cls = " none";
}
this.className = this.className.replace(/slideLeftPre|slideLeftNext|slideRightPre|slideRightNext/g,"").replace(/\s*$/,"") + cls;
});
}
document.body.addEventListener("touchmove",function(e){
//e.preventDefault();
},false);
document.body.addEventListener("touchend",function(e){
e.preventDefault();
if(e.target.tagName.toUpperCase() === "A"){
e.preventDefault();
if(lock){
return;
}
lock = true;
if(e.target.className === "slideLeft"){
sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " slideLeftPre";
index++;
index = index % size;
sections[index].className = sections[index].className.replace(/\s*none\s*/g,"") + " slideLeftNext";
}else if(e.target.className === "slideRight"){
sections[index].className = sections[index].className.replace(/\s*active\s*/g,"") + " slideRightPre";
index--;
index = (index+size) % size;
sections[index].className = sections[index].className.replace(/\s*none\s*/g,"") + " slideRightNext";
}
}
},false);
}
</script>
</body></html>
二、采用left属性值控制容器位置：
section{top:0;left:100%;opacity:0;}
section.active{left:0;z-index:2;opacity:1; /*transition:all 1s;*/}
section.slideLeftPre{
-webkit-animation: slideLeftPre 1s 1;
}
@-webkit-keyframes slideLeftPre{
0%{left:0;opacity:1}
99%{left:-99%;opacity:1}
100%{left:-100%;opacity:0}
}
section.slideLeftNext{
-webkit-animation: slideLeftNext 1s 1;
}
@-webkit-keyframes slideLeftNext{
0%{left:100%;opacity:1;z-index:2;}
100%{left:0;opacity:1;z-index:2;}
}
section.slideRightPre{
-webkit-animation: slideRightPre 1s 1;
}
@-webkit-keyframes slideRightPre{
0%{left:0;opacity:1}
99%{left:99%;opacity:1}
100%{left:100%;opacity:0}
}
section.slideRightNext{
-webkit-animation: slideRightNext 1s 1;
}
@-webkit-keyframes slideRightNext{
0%{left:-100%;opacity:1;z-index:2;}
100%{left:0;opacity:1;z-index:2;}
}