Stellar.js background not moving on scroll

Question

The issue is as follows: backgrounds do not float slowly on scroll, they just change each other smoothly, but there is no 'depth effect' as I've seen in several demos.

I would usually follow this example http://www.youtube.com/watch?v=NUsEGbSbMZ4. So what he has is kind of plain white panel with text that shifts over steering wheel image, but wheel image moves slightly itself. This is exactly what I can't reach.

Is there any solution?

index.php

<div class="slide" id="slide1" data-stellar-background-ratio="0.5">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
            </div>
            <div class="col-md-6"><h1></h1></div>
        </div>
    </div>
    <a class="button" href="" title=""></a>
</div>

custom.css

.slide {
    background-attachment: fixed;
    background-repeat: no-repeat;
    width: 100%;
    height: 100vh;
    position: relative;
}
#slide1 {
    background-image: url(../img/slide1/green-grapes.jpg);
    background-size: cover;
}
#slide2 {
    background-image: url(../img/slide2/indian-market.jpg);
    background-size: cover;
}
#slide3 {
    background-image: url(../img/slide3/floating-market.jpg);
    background-size: cover;
}

main.js

$(function() {
    $.stellar({
        verticalScrolling: true,
        parallaxBackgrounds: true,
        responsive: true,
        scrollProperty: 'scroll',
        positionProperty: 'position'
    }).stellar('refresh');
});

Answer 1

Okay, what I figured out is that I had to initialize Stellar.js by putting the following script before closing body tag:

<script>
    $.stellar();
</script>

Can someone explain me why initialization in main.js file (it is linked at the bottom of index.php) did not work?