Question

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

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

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

这是我的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>

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

Stellar.js的视差效果

1 个答案: