對象在視差滾動網站（stellar.js）中的不一致定位

我試圖用stellar.js創建一個簡單的三個'幻燈片'視差頁面（我聽說它有問題）。理想情況下，後兩頁包含一個圖像元素，其中央位於中央，文字上方懸浮着文字。在不同的瀏覽器大小和不同的瀏覽器中，所有這些元素都以不同的方式錯位對齊。對象在視差滾動網站（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; 
}

任何幫助將不勝感激，謝謝！

來源

2013-01-17 nhtw

沒有看到你的JavaScript代碼，它看起來像有一對夫婦的問題：

Stellar.js不能復位正在使用百分比定位的元素，基本上是因爲沒有辦法設置值是'50％+ 1px'。
您可能需要確保只啓用所需方向的滾動，例如$(window).stellar({ horizontalScrolling: false });

希望幫助:)

來源

2013-01-22 23:24:10 markdalgleish

對象在視差滾動網站（stellar.js）中的不一致定位

回答

相關問題