ScrollTo和Localscroll的視差背景效果

我已經環顧了幾個小時試圖弄清楚這一點。我有一個像這樣建立的網站jsfiddle。ScrollTo和Localscroll的視差背景效果

<div id="window"> 
<div id="section-wrapper"> 
    <div id="one" class="section"><p>One</p> 
    </div> 
    <div id="two" class="section"><p>Two</p> 
    </div> 
    <div id="three" class="section"><p>Three</p> 
    </div> 
    <div id="four" class="section"><p>Four</p> 
    </div> 
    <div id="five" class="section"><p>Five</p> 
    </div> 
    <div id="six" class="section"><p>Six</p> 
    </div> 
    <div id="seven" class="section"><p>Seven</p> 
    </div> 
    <div id="eight" class="section"><p>Eight</p> 
    </div> 
    <div id="nine" class="section"><p>Nine</p> 
    </div> 
</div>

我用ScrollTo和localscroll來瀏覽這個網站，我不知道如何可以實現對部分包裝的視差效果，使背景移動速度較慢。到處都是我看的視差插件和腳本是基於滾動功能，但由於我不使用滾動瀏覽我不知道如何添加效果。

有沒有一種方法可以只處理實際的背景圖像，即使用.animate和/或.css到background-position屬性，或者我應該把一個元素放在section-wrapper之後？我相當新的jQuery和JavaScript，但如果任何人都可以指出我在正確的方向，我想我可以弄明白。我剛纔不知道從哪裏開始..

來源

2014-10-07 Katalo

可怕的背景圖片 – loveNoHate 2014-10-07 07:55:35

裝上此文件頭網站的 https://github.com/markdalgleish/stellar.js/tree/master/src

啓動腳本

<script type='text/javascript'> 
<!-- 
(function($) { 
    $(document).ready(function() { 
     $.stellar({ 
      horizontalScrolling: false, 
      verticalOffset: 40 
     }); 
    }); 
})(jQuery); 
// --> 
</script>

現在你需要添加下面的div標籤是環繞背景

<div data-stellar-background-ratio="0.5">

您可以更新值0.5 - 它定義了背景圖像的速度。

來源

2014-10-07 08:05:52

感謝您的回答，不知道我是否做錯了。我用你的答案更新了jsfiddle，但無法讓它在那裏工作。 http://jsfiddle.net/Katalo/akr6fbvf/5/ 當我在螢火蟲看它的背景位置保持不變，我在頁面上移動 – Katalo 2014-10-07 09:22:45

http://codepen.io/mehmet/pen/omiJh 恆星和jQuery都附在頭上。 – 2014-10-07 11:44:26

恆星接縫使用邊距，滾動或位置來計算背景位置的移動。由於我的div浮動在容器中，因此無法計算：/ – Katalo 2014-10-07 20:28:09

ScrollTo和Localscroll的視差背景效果

回答

相關問題