2

I am using the jQuery library stellar.js to create some parallax style scrolling on a webpage I am building. I have been having little issues so far but have comea cross one that I just cannot seem to solve.

I have 4 divs which are acting as slides for the parallax with a width and a height of 100% so it fills the screen. I am then using a 'wrapper' inside with a set width (940px) for the parallax elements to be contained inside which would stop there being any issues between different monitor sizes.

The issue I am having is that when I give any of the elements inside this wrapper a 'data-stellar-ratio' of anything other than one it causes the elements to behave differently and position themseleves differently when the window is resized, such as viewing it on a different sized monitor:

Here is a sample of my code:

HTML

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
  <div class="wrapper">
    <img src="images/slide1/big_solution_button.png" data-stellar-ratio="1" data-stellar-vertical-offset="-45"alt="">
    <img src="images/slide1/tailored_text.png" data-stellar-ratio="1" data-stellar-vertical-offset="-35"alt="">
    <img src="images/slide1/button.png" data-stellar-ratio="2" data-stellar-vertical-offset="35"alt="">
    <img src="images/slide1/blur_button.png" data-stellar-ratio="0.5" data-stellar-vertical-offset="35"alt="">
  </div>    
  <a class="button" data-slide="2" title=""></a>
</div>

css:

enter image description here

Does anybody have any insight into this?

4

2 に答える 2

7

将来同様の問題に遭遇する人のために、この問題を解決することができました。

この問題は、水平スクロールが有効になっていることが原因で発生し、Stellar 関数呼び出しを次のようにすることで解決できます。

$.stellar({
   horizontalScrolling:false
   // other options...

});

于 2013-03-06T16:56:32.380 に答える