Dokunmatik cihazlarda yatay paralaks

Question

Dokunmatik cihazlarda çalışmak için yatay paralaks kaydırma ihtiyacım var. Sadece yana kaydırılabileceğin bir oyun yapıyorum. Farklı adımlarda hareket edecek birkaç katmana (en az üç) ihtiyacım var. Birkaç eklentiyi denedim (jInvertScroll ve Stellar.js birkaç isim) ancak işe yaramayabilir. Bunu sıfırdan yapmanın basit bir yolu var mı?

DÜZENLEME: Stellar.js dosyasını çalıştıramaz. Bu pasaj: Stellar'ın nesneleri bulduğunu ve bunları iki kutu gösterdiğinden bunlara göre hareket ettiklerini varsayalım: başlangıçta. Ve onlar mutlak konumlandırıyorlar. Ama hareket etmiyorlar. Bu aşamada sadece onların taşınmasını istiyorum. Ve bir iPad/tablet üzerinde bu etkiye sahip olmak için hangi adımları atmam gerekiyor.

jQuery kütüphaneleri:

<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; 
} 

Answer 1

Bu eklentiyi kullanarak sona erdi! http://robbiestewart.ca/wordpress/parallaxSwipe/parallax.html Harika çalışıyor! Hem dikey paralaks hem de yataydır (yatay olarak "parallaxVertical.js" olarak adlandırılır).