通過視差CSS3和jQuery

我工作的一個頁面的網站工作，其中每個部分的背景圖像的視差滾動比其他。通過視差CSS3和jQuery

這裏是我的HTML：

<section class="container" id="home"></section> 
<section class="container" id="about"></section> 
<section class="container" id="music"></section> 
<section class="container" id="news"></section> 
<section class="container" id="videos"></section> 
<section class="container" id="connect"></section> 
<section class="container" id="contact"></section>

這裏是我的CSS：

body{ 
    margin: 0px; 
    padding: 0px; 
} 

.container{ 
    width: 1920px; 
    min-height: 1080px; 
    background: 100% 100% no-repeat fixed; 
    margin: 0 auto; 
    background-color: transparent; 
} 


#home{background: url(../images/landingPage.png);} 
#about{background: url(../images/about.png);} 
#music{background: url(../images/music.png);} 
#news{background-image: url(../images/news.png);} 
#videos{background-image: url(../images/videos.png);} 
#connect{background-image: url(../images/connect.png);} 
#contact{background-image: url(../images/contact.png);}

在下面JSFiddle，前三個部分向下滾動，而底部四個部分在彼此滾動。

我想，我需要一些腳本添加到方程爲好。有人可以讓我看看我發佈的jsFiddle。謝謝。

來源

2013-08-24 justLearning

嗨，我有點困惑你的問題，你能設置的例子在j sfiddle –

我已將JSFiddle添加到我的原始問題中。 – justLearning

檢查http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/ – OneOfOne

你需要一點點的JavaScript。只是讓每個元素（頁），但第一個絕對postioned，不是固定不變的，並在啓動最高：100％，以避免看到任何，但第一位的，在文檔加載做到這一點：

爲了元素添加的每個連續的元素頂部位置是堆疊之前元素的所有高度，當元素的上邊緣達到100％的頂部時，元素相對定位之前...

當所有頁面都位於屏幕外（底部邊緣之下）使用上滾動，使每一頁滾動，一個接一個，當一個人的底邊到達屏幕的底部邊緣，開始移動另一...

來源

2013-08-24 07:08:33 Rastko

你能告訴我你的意思是我的jsFiddle嗎？ – justLearning

我對您的jsFiddle進行了更改，您需要將其應用於本地測試，因爲它不適用於jsfiddel，這是由於示例的複雜性。它很可能會成爲我的代碼中的bug，但這不是完整的解決方案是它可以爲你想迭加的div無限數量做的方式。下一步需要什麼是反向功能或任何其他wayyou要滾動其他的方式來工作，你是好去 – Rastko

我沒有看到任何變化....我失去了什麼？ – justLearning

通過視差CSS3和jQuery

回答

相關問題