Stellar.js Problem mit position

Ich versuche zu verwenden Stellar.js zu tun, eine Parallaxe-Effekt, aber der data-stellar-ratio=" tag" ist immer meine Elemente aus der position. Ich habe diese 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>

mit dieser 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;
}

Wenn Stellar "data-ratio" ist nicht in den tags, es passt gut, aber wenn ich diese parameter verändert es die "top".inneren ring und .core.

Hatte ich ein Problem wie das mit der horizontalen Ausrichtung, der .div-container hat "margin: 0 auto" und Kinder-Elemente wurde aus dem div-Element, während es "position: relative", aber ich " abgehackt "Marge" Stück code in der Stellaren Skript und es funktionierte.

Sorry, wenn ich war ein wenig verwirren, aber dieses Ding treibt mich in den Wahnsinn, da das tutorial habe ich (http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/) gar nicht erwähnt und weder die Stellar.js Website. Danke.

InformationsquelleAutor Vinicius Coelho | 2012-07-27

Schreibe einen Kommentar