Why are the elements in Stellar.js not moving?

css, html, jquery

Solution

I just saved your website & played around your code. Everything looks fine to me but still there is some problem. So, I removed all your script tags and added jQuery & Stellar from Stellar demo and it works fine.

There is only one bug I found, but I don't know that is the reason for this behaviour. There is a extra comma after `verticaloffset:0`.

$(function(){
    $.stellar({
        horizontalScrolling: false,
        verticalOffset: 0, /* Remove this comma at the end */
    });
});

Problem

I have 3 circles in the header that are suppose to fall at different rates when scrolled via stellar.js; unfortunatly, they dont even move. They all have position attributes(absolute); Moreover, I've applied the`data-stellar-ratio` to the approprate tags. Why won't stellar.js work? Even further, how does one test for jQuery to know if it's just not pilot error? HTML ``` <div id="companyInfo" > <div class="circlefront" data-stellar-ratio="1.2"></div> <div class="circlemiddle" data-stellar-ratio="1.8"></div> <div class="circlerear" data-stellar-ratio="3"></div> <div class="infoWrapper"> <h1>Towing, you can't do it without a truck, i have a truck</h1> <p>Id abunum ta inte publicae adhui senterem praties tantiena quitas vis, factum destus. Loca vehebus; et? Ti. Upionem, sil tala morbit ina, nique confendum tati et acepsen ihilin sula audactorips, fatur ia consign arisulos inatuis.</p> </div> </div> ``` CSS ``` section#company div#companyInfo { height: 24em; line-height: 3em; margin: 0 auto; color: #fff; } section#company div#companyInfo div.infoWrapper { width: 960px; margin: 5em auto; text-align: center; } section#company div#companyInfo div.infoWrapper h1 { font-size: 2em; } section#company div#companyInfo div.infoWrapper p { line-height: 1.2em; font-size: 1.125em; } section#company .circlefront { background: rgba(255, 255, 255, 0.7); width: 500px; height: 500px; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: absolute; top: 300px; left: 400px; } section#company .circlemiddle { background: rgba(255, 255, 255, 0.5); width: 250px; height: 250px; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: absolute; top: 100px; left: 200px; } section#company .circlerear { background: rgba(255, 255, 255, 0.3); width: 100px; height: 100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: absolute; top: 350px; right: 100px; } ``` jQuery ``` <script src="asset/js/libs/jquery.stellar.min.js"></script> <script type="text/javascript"> $(function(){ $.stellar({ horizontalScrolling: false, verticalOffset: 0, }); }); </script> ``` resources stellar.js tutorial on using stellar.js

Original source