Search code examples
jqueryhtmlcssparallax

Having strange position issues using Stellar.js parallax plugin

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?

Solution

  • I have managed to solve this issue for anyone who encounters a similar problem in the future.

    This issue is caused by horizontal scrolling being enabled and can be solved by making your Stellar function call look like this:

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

    });