使用Stellar.js实现视差效果

Question

我在一个网站上工作，我想实现一些轻微的视差效果。

这是到目前为止我的网站：

http://claytonkinder.com/

我想让视差影响灰度场背景图像，使其以不同的速度滚动，但我无法将其配置为工作。

下面是我的html：

<div id="top-block" data-stellar-background-ratio="0.5">
    <div class="bg-title">
        <h1 id="site-title">MODERN</h1>
    </div>
        <h2 id="site-subtitle">A splash of color</h2>

    <a href="#">
        <div class="top-block-button button1">Watch Video</div>
    </a>
    <a href="#">
        <div class="top-block-button button2">Download</div>
    </a>    
</div>

这是我的CSS：

#top-block {
   background-image: url('../../img/block.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   text-align: center;
   padding-top: 200px;
   padding-bottom: 200px;
}

下面是我的jQuery：

$(function(){
   $.stellar();
});

根据Stellar.js文档，我找不出哪里出错了。

Answer 1

当我将你的代码放入JS Fiddle中时，它是有效的：http://jsfiddle.net/a32qeyz1/

看起来你给stellar.js打的电话导致了404

<script src="js/stellar.min.js"></script>

可能需要仔细检查你的文件路径。