Can't Get Stellar.js to Work in JSFiddle

130 Views Asked by At

I'm trying to build a very simple parallax scrolling example in JSFiddle using Stellar.js.

Here's my Fiddle https://jsfiddle.net/ymrhu0mo/6/

What am I missing?

CSS

section {
float: left;
}

.main div {
height: 100px;
width: 100px;
}

.parallax div {
height: 50px;
width: 50px;
margin-bottom: 50px;
background-color: orange;
}

Javascript

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

HTML

 <div id="container">
    <section class="main">
        <div style="background-color: blue"></div>
        <div style="background-color: grey"></div>
        <div style="background-color: green"></div>
        <div style="background-color: red"></div>
    </section>

    <section class="parallax" data-stellar-ratio="1.75">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</div>
1

There are 1 best solutions below

1
On

you need to call the lib with script src="..." in your header or footer with either the link on the web or locally if you downloaded it