Question

我需要一个水平视差滚动才能在触控设备上工作。我正在制作一个游戏，你只能向侧面滚动。我需要几层（至少三层）以不同的速度移动。我尝试了几个插件（jInvertScroll和Stellar.js等等），但无法使用它。有没有一种简单的方法可以从头开始做到这一点？

编辑：无法让Stellar.js工作。这是片段：我假设Stellar找到了对象并相应地移动它们，因为有两个框显示：none;一开始。而且他们获得了绝对的定位。但他们不动。在这个阶段我只想让他们移动。并且，我需要采取哪些步骤才能在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;
}

Answer 1

结束使用此插件！ http://robbiestewart.ca/wordpress/parallaxSwipe/parallax.html 它很棒！它具有垂直视差和水平（水平错误地命名为＃34; parallaxVertical.js＆＃34;）。

触摸设备上的水平视差

1 个答案: