¿Por qué los elementos de Stellar.js no se están moviendo?

Question

Tengo 3 círculos en el encabezado que se supone que caen a diferentes velocidades cuando se desplazan por stellar.js; desafortunadamente, ni siquiera se mueven. Todos ellos tienen atributos de posición (absoluta); Además, he aplicado el data-stellar-ratio a las etiquetas apropiadas. ¿Por qué no funciona stellar.js? Aún más, ¿cómo hace una prueba para jQuery para saber si no es un error del piloto?

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> 

recursos stellar.js tutorial on using stellar.js

Answer 1

acabo de salvar su sitio web & jugado alrededor de su código de todo se ve bien para mí, pero todavía hay algún problema. Por lo tanto, eliminé todas las etiquetas de secuencia de comandos & jquery añadido & estelar de la demo estelar & funciona bien. Solo encontré un error, pero no sé cuál es el motivo de este comportamiento. Hay una coma adicional después del offset vertical: 0.

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

A continuación se muestra su sitio web en una carpeta zip descargarlo & tiene un vistazo al código.

https://dl.dropbox.com/u/19982181/svs.zip

Hope esto le ayudará.