2016-04-11 26 views
0

我需要水平視差滾屏才能在觸控設備上工作。我正在製作一個遊戲,你只能側身滾動。我需要幾層(至少三層),它們會以不同的速度移動。 我已經嘗試了幾個插件(jInvertScroll和Stellar.js僅舉幾例),但無法讓它工作。有沒有簡單的方法從頭開始做到這一點?觸控設備上的水平視差

編輯:無法讓Stellar.js工作。這是片段: 我假設恆星發現物體並相應地移動它們,因爲兩個盒子有顯示:無;在開始時。而且他們獲得了絕對的定位。但他們不動。在這個階段,我只是想讓他們搬家。 而且,我需要採取哪些步驟才能在iPad /平板電腦上產生這種效果。

的jQuery庫:

<script src="js/jquery.stellar.min.js"></script> 
<!-- OWN JQUERY --> 
<script src="js/javascript.js"></script> 

的jQuery:

$('#parallaxElements').stellar({ 
    horizontalScrolling: true 
}); 

HTML:

<!-- PICTURES AND LAYERS --> 
<div id="content"> 
    <div id="parallaxElements"> 
     <div id="forgrund" class="frontdrop" data-stellar-ratio="2" style="background:tomato;width:200px;height:50px;"> 
     </div> 

     <div id="kullarna" class="middledrop" data-stellar-ratio="1" style="background:purple;width:200px;height:50px;"> 
     </div> 

     <div id="bg" class="backdrop" data-stellar-ratio="0.5" style="background:blue;width:200px;height:50px;"> 
     </div> 
    </div> 
</div> 

CSS:

#content{ 
    position:relative; 
    width:1024px; 
    height:768px; 
    background-color:gray; 
    overflow:scroll; 
} 
#bg, #kullarna, #forgrund{ 
    width:2050px; 
    position:absolute; 
} 
#bg{ 
    height:768px; 
} 
#kullarna{ 
    z-index:10; 
} 
#forgrund{ 
    z-index:11; 
    height:600px; 
} 
+0

沒有簡單的CSS或JS方法,元素或屬性,可以輕鬆實現parallaxing。他們都依靠固定CSS中的背景元素,並使用JS來調節前景層以不同比例移動到滾動動作。插件通常是不幸的。如果您可以將您的插件選項中的一個作爲小提琴來定義您遇到的問題,我們可能會幫助您正確地工作。 – Korgrue

+0

我已經使用代碼段更新了我的帖子。正如我在編輯文本中所述。我只是想讓它移動,並知道我需要採取哪些步驟才能使其在平板電腦上運行。 –

回答