如何用stellar.js獲得視差背景？

我目前正在試圖通過複製此實現與stellar.js查詢插件視差背景：http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html 如何用stellar.js獲得視差背景？

當調用恆星功能似乎沒有任何改變。

這是我的嘗試，我要去哪裏錯的任何想法？
http://jsfiddle.net/4eBDE/55/

HTML：

<body> 
     <h1><a href="../">Stellar.js</a> Backgrounds Demo</h1> 
     <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div> 
     <div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div> 
     <div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div> 
     <div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div> 
     <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div> 
     <div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div> 
     <div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div> 
     <div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div> 
</body

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: helvetica, arial; 
    padding-top: 40px; 
} 
h1 { 
    background-color: black; 
    color: white; 
    height: 40px; 
    font-size: 24px; 
    font-weight: normal; 
    left: 0; 
    line-height: 40px; 
    position: fixed; 
    text-align: center; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 
h1 a { 
    border-bottom: 1px solid white; 
    color: white; 
    display: inline-block; 
    line-height: 30px; 
    text-decoration: none; 
} 
.photo { 
    background-attachment: fixed; 
    background-position: 50% 0; 
    background-repeat: no-repeat; 
    height: 450px; 
    position: relative; 
} 
.photo span { 
    bottom: 0; 
    color: white; 
    display: block; 
    left: 50%; 
    margin-left: -640px; 
    font-size: 38px; 
    padding: 10px; 
    position: absolute; 
    text-shadow: 0 2px 0 black, 0 0 10px black; 
    width: 1280px; 
} 
.summer { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/summer.jpg); 
} 
.autumn { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/autumn.jpg); 
} 
.winter { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/winter.jpg); 
} 
.spring { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/spring.jpg); 
}

的Javascript：

$(function() { 
    $.stellar({ 
     horizontalScrolling: false, 
     verticalOffset: 40 
    }); 
});

來源

2013-08-21 OriginalUtter

我重新添加了stellar.js文件，和它的作品。我認爲你的問題是所有的視差速度都是一樣的，所以很難區分。我改變了一些速度，在這小提琴，你可以告訴一個區別 -

http://jsfiddle.net/4eBDE/72/

<div class="photo summer" data-stellar-background-ratio="2"><span>Summer</span></div> 
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>

來源

2013-12-04 16:52:52 Steve

如何用stellar.js獲得視差背景？

回答

相關問題