0

我正在尝试使用 stellar.js 创建一个简单的三“幻灯片”视差页面（我听说它有问题）。理想情况下，后两页包含一个位于中心底部的图像元素，文本浮动在中心中心位置上方。在不同的浏览器尺寸和不同的浏览器中，所有这些元素都以不同的方式错位。

这是我对最后两张幻灯片的标记（第一张幻灯片并不是真正的问题）：

<!--Slide 2-->
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
        <div class="wrapper">

            <img src="images/slide2/slide2.png" data-stellar-ratio="3" data-stellar-vertical-offset="-20"alt="">
</div>
<span class="slideno"> Here is the layover text. </span>
        <a class="button" data-slide="3" title=""></a>
</div

<!--Slide 3-->
<div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
        <div class="wrapper">

            <img src="images/slide3/slide3.png" data-stellar-ratio="1.4" data-stellar-vertical-offset="-20"alt="">
<span class="slideno">Text for slide 3</span>
</div>

这是CSS：

/******************************
 SLIDE 2 
*******************************/
#slide2{
    background-color:#f0e9d3;

}
#slide2 img:first-child{
    position:absolute;
    top:50%;
    left:50%;
    margin-bottom:-449.5px;
    margin-left:-375px;
    height:899px;
    width:750px;

}
/******************************
 SLIDE 3
*******************************/
#slide3{
    background-color:#d9dddf;
}
#slide3 img:first-child{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-254px;
    margin-left:-506px;
    height:1012px;
    width:508px;
}

任何帮助将不胜感激，谢谢！

4

1 回答 1

0

没有看到你的 JavaScript 代码，看起来有几个问题：

  1. Stellar.js 无法重新定位使用百分比定位的元素，主要是因为无法将值设置为“50% + 1px”。
  2. 您可能需要确保只启用所需方向的滚动，例如$(window).stellar({ horizontalScrolling: false });

希望有帮助:)

于 2013-01-22T23:24:10.390 回答