0

stellar.js を使用して単純な 3 つの「スライド」視差ページを作成しようとしています (これには問題があると聞いています)。理想的には、次の 2 ページには、画像要素が中央下部にあり、テキストが中央中央に浮かんでいます。さまざまなブラウザー サイズやさまざまなブラウザーで、これらの要素はすべてさまざまな方法でずれています。

最後の 2 つのスライドのマークアップを次に示します (最初のスライドは実際には問題ではありません)。

<!--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. 基本的に、値を「50% + 1px」に設定する方法がないため、Stellar.js はパーセンテージを使用して配置された要素を再配置できません。
  2. おそらく、必要な方向にのみスクロールできるようにする必要があります。$(window).stellar({ horizontalScrolling: false });

それが役立つことを願っています:)

于 2013-01-22T23:24:10.390 に答える