使用Stellar.js的视差效果

Question

I'm working on a website and I want to implement some slight parallax effects.

Here is my site so far:

http://claytonkinder.com/

I want the parallax to affect the gray field background image so that it scrolls at a different rate, but I can't configure it to work.

Here is my 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>

Here is my 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;
}

And here is my jQuery:

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

I can't figure out where I went wrong according to the Stellar.js documents.

Answer 1

When I put your code in JS Fiddle it works: http://jsfiddle.net/a32qeyz1/

Looks like your call to stellar.js is causing a 404

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

Might want to double check your file path.