4

我正在尝试使用 Stellar.js 来制作视差效果，但是 data-stellar-ratio="" 标签让我的元素偏离了位置。我有这个代码：

<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>

使用这些 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;
}

当标签中没有恒星的“数据比率”时，它很合适，但是当我输入这个参数时，它会改变 .inner-ring 和 .core 的“顶部”。

我在水平定位方面遇到了这样的问题，.container div 有“margin：0 auto”，而子元素在 div 有“position：relative”时离开了 div，但我砍掉了“margin”一段代码恒星脚本，它工作。

对不起，如果我有点困惑，但这件事让我发疯了，因为我一直在关注教程（http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website -using-stellar-js/) 没有提到这一点，也没有提到 Stellar.js 网站。谢谢。

4

3 回答 3

6

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!

于 2013-01-09T11:48:27.033 回答
2

试试这个教程： http ://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

我发现 stellar.js 尚未完善。

于 2012-08-21T16:47:53.437 回答
0

我在这里回答了一个类似的问题 - stellar.js 背景图像位置问题

基本上是因为您在恒星功能中将水平滚动设置为“真”。

于 2014-02-23T19:22:16.117 回答