Stellar.js与位置问题

Question

I'm trying to use Stellar.js to do a parallax effect, but the data-stellar-ratio="" tag is getting my elements out of position. I have this codes:

<div class="slider" id="yours" data-slide="3" data-stellar-background-ratio="0.5">
<div class="container">
<div class="outer-ring" data-stellar-ratio="0.6">
<div class="inner-ring" data-stellar-ratio="-0.6" data-stellar-vertical-offset="0">
<div class="core" data-stellar-ratio="-0.3" data-stellar-vertical-offset="0"></div></div></div></div></div>

with these css:

.outer-ring {
    width: 635px;
    height: 635px;
    background: url(../img/conheca/wheel-1.png) no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -317px;
    left: 50%;
    margin-left: -317px;
}

.inner-ring {
    width: 478px;
    height: 478px;
    background: url(../img/conheca/wheel-2.png) no-repeat;
    position: relative;
    margin: 0px auto;
}

.core {
    width: 360px;
    height: 360px;
    background: url(../img/conheca/wheel-3.png) no-repeat;
    position: relative;
    margin: 0px auto;
}

When Stellar "data-ratio" is not in the tags, it fits well, but when i put this parameter it changes the "top" of .inner-ring and .core.

I had an issue like this with horizontal positioning, the .container div has "margin: 0 auto" and children elements was getting off the div while it have "position: relative", but i chopped off the "margin" piece of code in the Stellar script and it worked.

Sorry if i was a little confuse, but this thing is driving me insane, since the tutorial i've been following (http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/) doesn't mention this and neither the Stellar.js site. Thanks.

Answer 1

Make sure that all parent elements has position: relative ?

Also, you can set offset when calling the script, and if you only going to work with vertical scrolling you can simply shut off the horizontal scrolling:

  $(window).stellar({
    horizontalScrolling: false,
    verticalOffset: 0,
    horizontalOffset: 0
  });

Good luck!

Answer 2

Try this tutorial: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

I find stellar.js unpolished yet.

Answer 3

I answered a similar issue here - stellar.js background image position issue

Basically its because you have horizontal scrolling set to 'true' in the stellar function.