触摸设备上的水平视差

Question

我需要水平视差滚动才能在触摸设备上工作。我正在制作一款你只能横向滚动的游戏。我需要几层（至少三层）以不同的速度移动。我已经尝试了几个插件（jInvertScroll 和 Stellar.js 仅举几例）但无法让它工作。有没有从头开始做这个的简单方法？

编辑：无法使 Stellar.js 工作。这是片段：我假设 Stellar 找到了物体并相应地移动了它们，因为两个盒子有 display:none；在开始。而且他们得到绝对定位。但他们不动。在这个阶段，我只想让他们搬家。而且，我需要采取哪些步骤才能对 iPad/tablet.

产生这种影响

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

Answer 1

最终使用了这个插件！ http://robbiestewart.ca/wordpress/parallaxSwipe/parallax.html 效果很好！它既有垂直视差又有水平视差（虽然水平是错误命名的"parallaxVertical.js"）。

触摸设备上的水平视差

Horizontal parallax on touch devices

jquery

ipad

parallax