用jQuery创建一个视差背景效果

在本教程中,我们将使用JQuery水平滚动的网站并添加一个视差滚动背景效果让人想起老式2 d平台游戏,比如声波刺猬。
步骤1 -HTML
　　首先,我们需要创建一个基本的HTML结构我们将使用。所以点燃你选择的代码编辑器,创建一个新的HTML文件。身体内的标签,输入:
<div id="header">
   		<h1 id="logo">Scrolling Clouds</h1>
    	<ul id="menu">
        	<li><a href="#box1" class="link">Home</a></li>
            <li><a href="#box2" class="link">Box 2</a></li>
            <li><a href="#box3" class="link">Box 3</a></li>
            <li><a href="#box4" class="link">Box 4</a></li>
      </ul>
	</div><!-- end header -->
	<div id="wrapper">
    	<ul id="mask">
        	<li id="box1" class="box">
            	<a name="box1"></a>
                <div class="content"><div class="inner">Home Box</div></div>
            </li><!-- end box1 -->
            <li id="box2" class="box">
            	<a name="box2"></a>
                <div class="content"><div class="inner">Box 2</div></div>
            </li><!-- end box2 -->
            <li id="box3" class="box">
            	<a name="box3"></a>
                <div class="content"><div class="inner">Box 3</div></div>
            </li><!-- end box3 -->
            <li id="box4" class="box">
            	<a name="box4"></a>
                <div class="content"><div class="inner">Box 4</div></div>
            </li><!-- end box4 -->
        </ul><!-- end mask -->
    </div><!-- end wrapper -->
步骤二 -CSS
/*** Style Definitions ***/
html				{ background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }
 
/*** Header ***/
h1#logo				{ background:url(../images/Logo.png) top left no-repeat; height:62px; width:481px;
						text-indent:-9999px; position:absolute; top:10px; left:10px; }
 
#menu				{ float:right; position:absolute; top:20px; right:10px; z-index:10; }
 
#menu a				{ background:#FFF; color:#67b2ff; border:#AAA 3px solid;  text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
 
#menu a:hover		{ background:#67b2ff; color:#FFF; border:#FFF 3px solid; text-decoration:none; padding:10px;
						margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
 
#menu li			{ float:left; }
 
/*** Body Content ***/
#wrapper	{ width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }
 
#mask		{ width:400%; height:100%; }
 
.box		{ width:25%; height:100%; float:left; }
 
.content	{ width:960px; height:400px; top:20%; margin: 0 auto; position:relative; background:rgba(255,255,255, 0.3);
				border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }
 
.inner		{ width:920px; height:360px; background:rgba(255, 255, 255, 0.3); border-radius:30px; -moz-border-radius:30px;
					-webkit-border-radius:30px; margin:5px; padding:15px; top:5px; position:relative; }
我们将滚动#包装器div内,保持上述#头部区域,使其固定无论我们滚动。#面具div将div的滑动,所以它的宽度设置为100% *的盒子数量将包含。在这种情况下我们需要4盒,宽度是400%。
步骤3——JQuery
$(document).ready(function() {  
		$('a.link').click(function () {  
			$('#wrapper').scrollTo($(this).attr('href'), 800);
			return false;  
		});  
	});
这么简单!让我们通过代码是做什么。
以现在我们知道如何滚动的内容具体的div,我们可以利用我们的优势。让我们添加更多的div,每个云两个层。我们将流行这些在标题div。
<div id="cloud1" class="clouds">
	<div id="clouds-small"></div>
</div><!-- end clouds -->
<div id="cloud2" class="clouds">
	<div id="clouds-big"></div>
</div><!-- end clouds -->
用一些CSS和风格:
.clouds		{ width:100%; height:262px; overflow:hidden; }
#clouds-small	{ width:3000px; height:100%; background:url(../images/bg-clouds-small.png) repeat-x;}
#cloud2		{ position:relative; top:-262px; }
#clouds-big	{ width:4000px; height:100%; background:url(../images/bg-clouds-big.png) repeat-x;}
我们增加了维度和div背景图像,为他们额外的广泛适应滚动,一个在另一个位置。在源文件中,可以找到所有图片,应该保存在一个名为“图像”的目录。
步骤4——现在在一起!
　　我们几乎完成了!之前我们可以得到scrollTo插件将那些云,我们需要编写一个小的helper函数,会告诉它什么时候这些div转向。会有4点我们需要设置,对应4个链接。
function setPosition(check, div, p1, p2, p3, p4) {
	if(check==='#box1')
		{
			$(div).scrollTo(p1, 800);
		}
	else if(check==='#box2')
		{
			$(div).scrollTo(p2, 800);
		}
	else if(check==='#box3')
		{
			$(div).scrollTo(p3, 800);
		}
	else
		{
			$(div).scrollTo(p4, 800);
		}
};
我们传递的内容链接我们滚动,div我们想要移动和4位置的形式转移到e。旅客:“400 px”。回到我们点击监听器函数,我们将添加一个调用helper函数为我们的# clouds-small div:
$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
        //add this line
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
        //end add this
		return false;  
	});  
});
这将小云彩层每一步400 px。让他们慢于其他层,并帮助他们遥远的错觉。记住这一点,我们想要更大的云-近的移动来保持的两倍,幻觉,因此我们将每一步移动800 px。
$(document).ready(function() {  
		$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
        //add this line
		setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')
        //end add this
		return false;  
	});  
});
我们现在有一些活泼的云,页面的内容无论它去!让我们只是添加最后一个小触摸页面添加一个视觉提示,让用户可以告诉他们网站的一部分。我们将添加一个。选择类链接通过点击监听器的朋友,并通过CSS样式。
$(document).ready(function() {  
	$('a.link').click(function () {  
		$('#wrapper').scrollTo($(this).attr('href'), 800);
		setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
		setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')
        //add this
		$('a.link').removeClass('selected');  
		$(this).addClass('selected');
        //end add this
		return false;  
	});  
});
#menu a.selected { 
background:#AAA; 
color:#FFF; 
border:#67b2ff 3px solid; 
text-decoration:none; 
padding:10px;
margin-right:10px; 
border-radius:10px;
 -moz-border-radius:10px; 
-webkit-border-radius:10px;
}