Perché gli elementi di Stellar.js non si spostano?

Question

Ho 3 cerchi nell'intestazione che supponiamo di cadere a velocità diverse quando si scorre tramite stellar.js; sfortunatamente, non si muovono nemmeno. Hanno tutti attributi di posizione (assoluti); Inoltre, ho applicato lo data-stellar-ratio ai tag appropriati. Perché stellar.js non funziona? Inoltre, come fa un test per jQuery per sapere se non si tratta solo di un errore del pilota?

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> 

risorse stellar.js tutorial on using stellar.js

Answer 1

ho appena salvato il vostro sito web & giocato un po 'il codice sembra tutto bene per me, ma ancora c'è qualche problema. Così, ho rimosso tutti i tag script & aggiunto jquery & stellare dalla demo stellare & funziona benissimo. C'è solo un bug che ho trovato, ma non so che è la ragione di questo comportamento. C'è una virgola in più dopo verticaloffset: 0.

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

Qui di seguito è il vostro sito web in una cartella zip scaricarlo & dare un'occhiata al codice.

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

Spero che questo vi aiuterà.