我正在尝试使用 stellar.js(我听说它有问题)创建一个简单的三“幻灯片”视差页面。理想情况下,后两页包含一个位于中心底部的图像元素,文本 float 在其上方的中心位置。在不同的浏览器大小和不同的浏览器中,所有这些元素都以不同的方式错位。
这是我对最后两张幻灯片的标记(第一张幻灯片不是真正的问题):
<!--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;
}
任何帮助将不胜感激,谢谢!
最佳答案
没有看到您的 JavaScript 代码,看起来有几个问题:
- Stellar.js 无法重新定位使用百分比定位的元素,主要是因为无法将值设置为“50% + 1px”。
- 您可能需要确保只在需要的方向启用滚动,例如
$(window).stellar({ horizontalScrolling: false });
希望对您有所帮助:)
关于jquery - 视差滚动网站(stellar.js)中对象的不一致定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14370490/