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>
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