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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Stellen Sie sicher, dass alle übergeordneten Elemente hat
position: relative
?Können, können Sie auch festlegen, offset beim Aufruf der Skript, und wenn Sie nur gehen, um die Arbeit mit den vertikalen Bildlauf können Sie einfach abschalten, das horizontale scrolling:
Glück!
InformationsquelleAutor Rikard
Versuchen Sie dieses tutorial:
http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
Finde ich stellar.js ungeschliffen noch.
InformationsquelleAutor Sergiu
Antwortete ich ein ähnliches Problem hier - stellar.js background image position Problem
Im Grunde sein, weil Sie den horizontalen Bildlauf auf 'true' in der stellar-Funktion.
InformationsquelleAutor JWPersh