視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為今年網頁設計的熱點趨勢，越來越多的網站應用了 這項技術。現在越來越多的網站采用視差水平滾動來創建絢麗的效果，其實這樣的效果使用jquery實現的，上一次我發布了一篇使用這個效果做的網站，《 40個視差滾動效果網站的新技術應用 》，今天就給大家分享一下這樣的效果實現原理，下一次在做網站的時候你就可以使用這樣的效果作出絢麗的效果
?
?
?
Demo ????
?
?
?
?1 – 創建基本的html
?
首先創建最基本的html文件架構 ，這個就不多說了，代碼如下:
?
<div id="header">
<h1 id="logo">Clouds demo</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">主頁</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 -->
?
?
定義一個header的ID標記，然后下面有個四個導航，用于切換的
?
?
2 – 一些CSS代碼
?
創建一個新的CSS文件 ，把它定義成layout.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; }
?
?
這些CSS代碼相信你能看到吧，我簡單解釋一下 ，我們把需要滾動的區域放在id為wrapper的DIV內，無論他在那個地方一定要保證他滾動的固定性。id為mask的標記做為具體的滑動實現，他的 寬度是100%，因為這里有4個區域需要全屏滾動，所以他的寬度設置為400
?
?
我們想讓每個方形盒子在屏幕的中間，所以給每個方形盒子定義一個li元素哦。然后定義CSS3 border-radius圓角和rgba背景顏色來創建一個半透明的漂亮邊框圓角效果，到這里為止創建的效果如下所示
?
?
?
?
第3步 - 使用jQuery來創建效果
上面基本的網站架構做好之后并沒有使用javascript，現在我們開始使用jquery創建有趣的滾動效果，我們使用 ScrollTo的jquery插件來達到我們想要的效果，首先引入jquery文件
?
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
?
?
然后打開這個文件看到最基本的jquery語法
?
$(document).ready(function() {
$('a.link').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
});
?
?
就這么簡單，看看這個代碼做個什么
?
- 1， 確保整個頁面加載之前運行腳本。
- 2? ，增加了點擊監聽所有<a>標簽。 在這種情況下，這是我們的導航菜單中的所有鏈接，但我們可以添加“鏈接”類行為的任何頁面上的鏈接。 然后，我們指定一個動作，點 擊檢測功能。
- 3? 呼吁＃包裝的div的scrollTo插件，并傳遞給它的目的地，并以毫秒為單位的時間來完成動畫。
- 4 取消點擊瀏覽器的默認行為。
?
現在我們知道如何滾動一個特定的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 ***/
.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插件來進行移動，我需要寫一個小的輔助功能，將告訴它移動定位到那個DIV。 將有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);
}
};
?
$(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個像素，看他們之間的差異像素大小
$(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;
});
});
? 添加后續的云div，注意這里的div設置成800個像素了，這點需要大家注意
$(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;
}
?
?
這個是css邊框圓角效果 ，下面是演示效果，源碼的話留下郵箱給你發郵箱里面去
?
?
來源： http://www.cnblogs.com/58top/archive/2012/08/09/effect_using_jquery.html
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
