`
mutongwu
  • 浏览: 437631 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

简单的css3全屏滚动-左右方向

    博客分类:
  • CSS
阅读更多
据说 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;}
		}
0
0
分享到:
评论

相关推荐

    纯CSS3超酷全屏响应式幻灯片特效

    这是一款效果非常炫酷的纯CSS3全屏幻灯片特效。该幻灯片特效的效果类似于全屏水平方向的单页滚动效果。该幻灯片效果使用纯CSS3制作,代码仅有100多行,非常的小巧。

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery...

    vue-fullpage:vue@2.x的单页滚动插件https:river-lee.github.iovue-fullpageexamples

    要在移动设备中实现单页滚动,请支持水平滚动和垂直滚动,并支持animate.css的所有动画指令。 在线演示 这是一个 安装 npm install fullpage-vue --save 如果要使用动画指令,请安装animate.css npm install ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图...

    CSS实现QQ浏览器功能

    1.结合fullpage.js实现全屏滚动 2.CSS中linear-gradient() 函数用于创建一个线性渐变的 “图像”。      background-image: linear-gradient(direction, color-stop1, color-stop2, ...);   值 描述 ...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...

    100多个JQuery效果示例(实例)div+css+javascrpit

    51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...

    JS效果打包下载-自己整理的一些网站常用JS效果2

    25.全屏广告代码.html ...27.如何用css自定义鼠标形状?...42.用css实现简单的进度条.html 43.在同一页面设置不同文字链接效果的样式.html 44.支持按键盘方向键实现翻页跳转的效果.html 45.支持键盘方向键.html

    EscapeVelocity:适用于移动网站和网络应用程序的 Android 网页视图 - 在 5 分钟内自定义您的应用程序

    处理不同的屏幕方向 Android 动画 支持快速滚动 - 高渲染注册表提交和批准 自动自定义每件事在几分钟内(100% 自定义) Google Play 广告事件控制(横幅和全屏)选项菜单&gt;联系页面选项菜单&gt;关于我们选项菜单&gt;主页...

    jquery 动态示例

    51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图...

    《程序天下:JavaScript实例自学手册》光盘源码

    第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...

    程序天下:JavaScript实例自学手册

    第3章 字符串文本和输入框特效 3.1 只带下划线的输入框 3.2 限定文本框可输入字符数 3.3 文字过长的省略号 3.4 输出26个英文字母 3.5 首字母变为大写 3.6 textarea自适应文字行数 3.7 禁止文本框的拷贝和粘贴 3.8 ...

    WEB设计大全

    利用GUI特性创建交互性 &lt;br&gt;12.1 网站和传统的GUI &lt;br&gt;12.2 GUI设计的含义 &lt;br&gt;12.3 窗口 &lt;br&gt;12.4 全屏窗口 &lt;br&gt;12.5 子窗口 &lt;br&gt;12.5.1 警告 &lt;br&gt;12.5.2 确认 &lt;br&gt;12.5.3 提示 ...

    WEB设计大全(part2)

    利用GUI特性创建交互性 &lt;br&gt;12.1 网站和传统的GUI &lt;br&gt;12.2 GUI设计的含义 &lt;br&gt;12.3 窗口 &lt;br&gt;12.4 全屏窗口 &lt;br&gt;12.5 子窗口 &lt;br&gt;12.5.1 警告 &lt;br&gt;12.5.2 确认 &lt;br&gt;12.5.3 提示 ...

    C#开发经验技巧宝典

    0396 将CSS样式表应用到页面中 222 0397 在页面的源码中直接定义样式表 222 0398 动态加载主题到页面中 223 0399 利用Table布局Web页面 223 0400 FrameSet框架的应用 224 0401 IFrame框架的应用 224 ...

    JAVA上百实例源码以及开源项目源代码

    Java 3DMenu 界面源码 5个目标文件 内容索引:Java源码,窗体界面,3DMenu Java 3DMenu 界面源码,有人说用到游戏中不错,其实平时我信编写Java应用程序时候也能用到吧,不一定非要局限于游戏吧,RES、SRC资源都有,都...

    JAVA上百实例源码以及开源项目

    一个简单的CS模式的聊天软件,用socket实现,比较简单。 凯撒加密解密程序 1个目标文件 1、程序结构化,用函数分别实现 2、对文件的加密,解密输出到文件 利用随机函数抽取幸运数字 简单 EJB的真实世界模型(源代码...

    C#编程经验技巧宝典

    2 &lt;br&gt;0003 设置程序代码行序号 3 &lt;br&gt;0004 开发环境全屏显示 3 &lt;br&gt;0005 设置窗口的自动隐藏功能 3 &lt;br&gt;0006 根据需要创建所需解决方案 4 &lt;br&gt;0007 如何使用“验证的目标架构”功能 4 ...

Global site tag (gtag.js) - Google Analytics