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

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

    博客分类：
  • CSS
csscss3animationwebkit 
阅读更多
据说 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全屏滚动
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5全屏滚动实例 完美实现全屏滚动带动画

    HTML5全屏滚动效果是一种常见的网页设计技巧，它利用HTML5的新特性以及CSS3的动画效果，为用户提供沉浸式的浏览体验。全屏滚动通常应用于网站的首页或展示型页面，以展示丰富的视觉内容，引导用户逐步了解信息。下面...

    基于html5和css3响应式全屏滚动页面切换效果

    本文将深入探讨如何利用HTML5和CSS3构建一个基于全屏滚动的响应式页面切换效果。 首先，HTML5是新一代的超文本标记语言，引入了许多新的元素和API，为开发者提供了更多构建网页结构和功能的选择。例如，`&lt;header&gt;`...

    3D全屏垂直滚动-前台模板

    3D全屏滚动则在此基础上增加了维度，通过立体效果和动态过渡，让页面元素在垂直方向上以三维方式变换，增强用户的沉浸感。 该前台组件可能包括以下核心知识点： 1. **HTML 结构**：构建3D全屏滚动效果的基础是合理...

    微信小程序-全屏动画滚动-程序源码.zip

    通过研究这个源码，开发者不仅可以掌握微信小程序中的动画机制，还能学习到如何结合API和CSS3动画技术实现流畅的全屏滚动效果。这将对提升用户体验、设计富有动态感的小程序页面有着极大的帮助。同时，源码分析也是...

    WIN+8效果左右全屏滚动的幻灯片

    标题中的“WIN+8效果左右全屏滚动的幻灯片”指的是Windows 8操作系统中一种特有的用户界面元素，它在展示信息或者进行演示时，利用全屏显示和左右滑动的交互方式，使得内容呈现更加生动和直观。这种设计灵感来源于...

    js全屏滚动效果

    实现全屏滚动效果的关键在于JavaScript和CSS3的运用。首先，我们需要设置HTML结构，将每个滚动层（通常是一屏内容）封装在独立的容器元素内，并赋予相应的ID以便JavaScript操作。接着，通过CSS3来定义每个容器的全屏...

    全屏滚动全屏滚动

    全屏滚动的基本原理是通过JavaScript或CSS3来控制页面内容的分层和滚动。通常，设计师会将每个屏幕或部分作为一个独立的“滚动层”，然后利用JavaScript库如jQuery或专门的全屏滚动插件（例如fullPage.js、...

    html5和css3响应式全屏滚动页面切换效果

    此外，CSS3还提供了过渡（Transitions）、动画（Animations）和3D变换，这些特性使得全屏滚动页面切换效果得以实现，为用户带来平滑的视觉体验。 在实现全屏滚动页面切换效果时，通常会利用HTML5的`&lt;section&gt;`元素...

    js css3全屏3D画布图片滑动切换效果代码

    CSS3提供了媒体查询（Media Queries）功能，可以根据设备的屏幕尺寸和方向应用不同的样式。JavaScript也可以帮助检测设备特性，并据此调整行为。 在压缩包内的文件“texiao8250_1560680953”中，很可能包含了项目的...

    jQuery全屏视差滚动效果

    2. **CSS3属性**：全屏视差滚动通常依赖CSS3的`transform`和`transition`属性。`transform`允许我们对元素进行平移、旋转、缩放等变换，其中`translateZ`用于创建3D视图，增加深度感。`transition`则定义元素从一种...

    fullPage全屏滚动与css动画

    结合fullPage插件和CSS3动画，可以实现更具创意和互动性的全屏滚动网站。例如，在每个全屏段落切换时，添加一个淡入淡出的过渡效果，或者在用户滚动到特定段落时触发一个动态图形的动画。这不仅增强了网页的视觉冲击...

    jQuery ui页面全屏滚动fullPage.js插件页面滚动

    全屏滚动效果在现代网页设计中非常流行，它能够提供流畅、沉浸式的用户体验。`fullPage.js`是一款基于jQuery的插件，专为实现这样的效果而设计。在本篇文章中，我们将深入探讨如何使用jQuery UI以及`fullPage.js`来...

    APP软件介绍页面全屏滚动展示特效

    3. 适应性设计：考虑到不同设备的屏幕尺寸和方向，全屏滚动特效应具备良好的响应式布局，保证在各种设备上都能良好显示。 4. 可访问性：遵循无障碍设计原则，确保视觉障碍用户也能通过辅助技术如屏幕阅读器来理解和...

    jQuery单页全屏滚动插件onepage-scroll

    3. **页面元素错位**：由于全屏滚动需要改变元素的position属性，可能导致原有布局出现问题，需对CSS进行调整。 4. **兼容性问题**：虽然onepage-scroll对大部分现代浏览器有很好的支持，但对老旧浏览器的兼容性需...

    html5全屏滚动响应式设计师个人主页模板

    HTML5全屏滚动响应式设计师个人主页模板是一种现代网页设计趋势，它结合了HTML5的新特性、CSS3的动画效果以及响应式布局，为设计师提供了一个展示作品和个人风采的平台。这种模板通常由一系列全屏的滚动页面组成，每...

    响应式全屏滚动式jQuery图片画廊插件

    响应式全屏滚动式jQuery图片画廊插件是一种在网页设计中广泛应用的工具，它能够为网站增添引人入胜的视觉效果。这种插件基于JavaScript库jQuery，它以其高效、简洁的API闻名，使得开发者能够轻松实现复杂的交互功能...

    微信小程序-全屏动画滚动设计

    2. **数据管理**：通过JavaScript处理数据，例如动画的当前状态、滚动方向等。可以使用`Page`对象的`data`属性来存储这些数据。 3. **生命周期方法**：微信小程序的页面生命周期函数是实现动画的关键。例如，在`...

    认知全屏滚动插件

    全屏滚动插件的工作原理是利用JavaScript和CSS3技术，监听用户的滚动事件，然后根据预设的动画效果平滑地过渡到下一个页面或内容区域。这种效果可以增强网站的吸引力，使内容呈现更加流畅和引人入胜。同时，插件可能...

    Fullpage全屏滚动例子

    **全屏滚动插件Fullpage.js详解** 全屏滚动效果在现代网页设计中越来越常见，它为用户提供了独特的浏览体验，使网站看起来更加时尚且富有动态感。Fullpage.js是一款强大的JavaScript插件，专用于实现这种效果。它...

    jquery全屏滚动插件

    4. **响应式设计**：考虑到移动设备的广泛使用，好的全屏滚动插件应具备响应式设计，能根据设备的屏幕大小和方向自动调整布局。 5. **浏览器兼容性**：兼容IE8意味着插件可能需要使用特定的技巧来处理旧版浏览器的...

Magicbox
Global site tag (gtag.js) - Google Analytics